/* www.tadaphoto.com. One screen, after Retro's home page: the mark and one line on top, a wide rounded strip of
   photos in the middle, the three tools under it, the download row and one line of legal at the bottom. Photos drift
   right to left through a pink viewfinder; paint splats on each one there and it leaves as a tada. White ground, pink
   only for paint, the mark and the button. */
@font-face{font-family:"Cherry Bomb One";src:url("/assets/fonts/CherryBombOne-latin.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/Inter-latin.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  --paper:#FFFFFF; --ink:#0B0B0C; --grey:#6E6E73; --hair:#E5E5EA; --fill:#F2F2F7;
  --pink:#F9ACC4; --pink-press:#F58FB0; --pink-edge:#C9708F;
  --brand:"Cherry Bomb One","Arial Rounded MT Bold",ui-rounded,system-ui,sans-serif;
  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,"Segoe UI",sans-serif;
  /* tile height; tiles are 2:3. Leaves room for everything else on one screen. */
  --th:clamp(220px,calc(100svh - 406px),440px);
  --radius:44px;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);overflow-x:clip}
body{font-family:var(--ui);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
a{color:inherit}
img,video{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:8px}

.page{min-height:100svh;display:flex;flex-direction:column;
  padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}

/* mark */
header{display:flex;justify-content:center;padding-block:clamp(14px,2.6svh,26px) 0}
.lockup{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.lockup svg{width:34px;height:34px;flex:none}
.word{display:inline-flex;font-family:var(--brand);font-size:30px;line-height:1;color:var(--ink)}
.word i{font-style:normal;display:inline-block}

main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,3.4svh,40px);padding-block:clamp(12px,2.4svh,28px)}
h1{margin:0;font-family:var(--brand);font-weight:400;font-size:clamp(34px,min(4.6vw,7svh),64px);line-height:1;letter-spacing:-.01em;text-align:center;text-wrap:balance;max-width:16ch}

/* the strip */
.stage{width:min(1180px,100%);display:flex;flex-direction:column;align-items:center}
.beltwrap{position:relative;width:100%;height:var(--th)}
.belt{position:absolute;inset:0;border-radius:var(--radius);overflow:hidden;background:var(--fill);isolation:isolate}
.track{position:absolute;inset:0;display:flex;gap:2px}
.tile{position:relative;flex:none;height:100%;aspect-ratio:2/3;overflow:hidden;background:var(--fill)}
.js .tile{position:absolute;left:0;top:0;will-change:transform}
.tile>img,.tile>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* every tada is a Live Photo: the badge shows on each one that came out of the viewfinder */
.tile::after{content:"LIVE";position:absolute;left:10px;top:10px;z-index:5;height:22px;padding:0 8px 0 24px;border-radius:999px;
  background:rgba(0,0,0,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='2.6' fill='%23fff'/%3E%3Ccircle cx='12' cy='12' r='6' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='12' r='9.6' fill='none' stroke='%23fff' stroke-width='1.6' stroke-dasharray='1.4 2.4' stroke-linecap='round'/%3E%3C/svg%3E") 7px 50%/13px no-repeat;
  color:#fff;font:600 11px/22px var(--ui);letter-spacing:.06em;transition:opacity .3s}
.js .tile:not(.alive)::after{opacity:0}

/* stickers */
.stk{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:calc(var(--w) * 1%);translate:-50% -50%;z-index:3;pointer-events:none}
.stk img{width:100%;height:auto;filter:drop-shadow(0 2px 3px rgba(0,0,0,.22));animation:bob calc(var(--d,2.4) * 1s) ease-in-out infinite;animation-delay:calc(var(--k,0) * -0.6s)}
@keyframes bob{0%,100%{translate:0 0;rotate:-3deg}50%{translate:0 -4%;rotate:3deg}}
@keyframes pop{0%{scale:0;rotate:-20deg}100%{scale:1;rotate:0deg}}
.js .tile:not(.alive) .stk{scale:0}
.js .tile.alive:not(.instant) .stk{animation:pop .5s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(120ms + var(--k,0) * 110ms)}

/* Draw: the doodled loop sits over the photo and shows once the paint has covered it */
.js .tile:not(.alive) .drawn{opacity:0}

/* the pink viewfinder in the middle: corners stand just outside the strip */
.frame{position:absolute;top:-10px;bottom:-10px;left:50%;width:calc(var(--th) * 2 / 3 + 20px);translate:-50% 0;z-index:4;pointer-events:none}
.frame i{position:absolute;width:30px;height:30px;border:3.5px solid var(--pink);border-radius:3px}
.frame i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0;border-top-left-radius:14px}
.frame i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0;border-top-right-radius:14px}
.frame i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0;border-bottom-left-radius:14px}
.frame i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0;border-bottom-right-radius:14px}
.splat{position:absolute;left:0;top:0;z-index:6;pointer-events:none}

/* the three tools, overlapping the strip's bottom edge under the viewfinder */
.tools{position:relative;z-index:7;margin-top:-24px;display:flex;gap:2px;padding:4px;border-radius:999px;background:var(--fill);box-shadow:0 0 0 5px var(--paper)}
.seg{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 16px 0 12px;border-radius:999px;color:var(--grey);text-decoration:none;
  font:600 15px/1 var(--ui);letter-spacing:-.01em;white-space:nowrap;transition:color .3s}
.seg svg{width:20px;height:20px;flex:none}
.seg:hover{color:var(--ink)}
.seg.on{color:#fff}
.thumb{position:absolute;z-index:0;left:0;top:4px;height:40px;width:var(--tw,0);translate:var(--tx,0) 0;border-radius:999px;background:var(--ink);
  transition:translate .45s cubic-bezier(.3,1.25,.5,1),width .45s cubic-bezier(.3,1.25,.5,1)}
html:not(.js) .seg.on{background:var(--ink)}
html:not(.js) .thumb{display:none}

/* download */
.get{display:flex;align-items:center;justify-content:center;gap:18px;padding-top:4px}
.cta{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 34px;border-radius:16px;flex:none;
  background:var(--pink);color:var(--ink);text-decoration:none;font:800 15px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 4px 0 var(--pink-edge);transition:translate .08s,box-shadow .08s,background .15s}
.cta:hover{background:var(--pink-press)}
.cta:active{translate:0 3px;box-shadow:0 1px 0 var(--pink-edge)}
.qr{display:flex;align-items:center;gap:12px;padding:8px 16px 8px 8px;border:1px solid var(--hair);border-radius:16px;background:var(--paper)}
.qr img{width:60px;height:60px;padding:5px;background:#fff}
.qr span{font-size:13px;line-height:1.35;color:var(--grey);white-space:nowrap}
.qr b{color:var(--ink);font-weight:600}

footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 12px;padding-block:10px 18px;color:var(--grey);font-size:13px}
footer nav{display:flex;flex-wrap:wrap;gap:0 18px}
footer a{text-decoration:none;padding-block:6px}
footer a:hover{color:var(--ink)}
footer details.lang{position:relative}
footer details.lang summary{list-style:none;cursor:pointer;padding-block:6px}
footer details.lang summary::-webkit-details-marker{display:none}
footer details.lang summary::after{content:"";display:inline-block;width:5px;height:5px;margin:0 0 2px 6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;rotate:45deg}
footer details.lang div{position:absolute;right:0;bottom:calc(100% + 6px);display:flex;flex-direction:column;min-width:120px;padding:6px 0;border-radius:12px;background:#fff;box-shadow:0 6px 24px rgba(0,0,0,.14);z-index:10}
footer details.lang div a{padding:7px 14px;color:var(--ink)}
footer details.lang div a[aria-current]{font-weight:600}
:lang(zh-Hans) h1,:lang(ja) h1,:lang(ko) h1{font-family:"PingFang SC","Hiragino Sans","Hiragino Kaku Gothic ProN","Apple SD Gothic Neo","Noto Sans CJK SC","Noto Sans CJK JP","Noto Sans CJK KR",system-ui,sans-serif;font-weight:800;letter-spacing:0;line-height:1.15}

/* phones: the strip runs almost edge to edge and the photo in the viewfinder is about two thirds of the width */
@media (max-width:760px){
  :root{--radius:28px;--th:clamp(210px,min(calc((100vw - 16px) * 1.08),calc(100svh - 408px)),560px)}
  .page{padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))}
  header{padding-top:14px}
  h1{font-size:clamp(30px,min(10vw,5.6svh),44px);padding-inline:12px}
  main{gap:clamp(14px,2.6svh,26px)}
  .frame{top:-8px;bottom:-8px;width:calc(var(--th) * 2 / 3 + 16px)}
  .frame i{width:22px;height:22px;border-width:3px}
  .tools{margin-top:-21px;box-shadow:0 0 0 4px var(--paper)}
  .seg{height:34px;padding:0 11px 0 9px;gap:5px;font-size:13px}
  .seg svg{width:17px;height:17px}
  .thumb{height:34px}
  .qr{display:none}
  .cta{height:54px;padding:0 40px}
  footer{padding-inline:12px;padding-block:6px 14px}
  footer .guides{order:-1;flex-basis:100%;gap:0 14px}
  footer .guides a{padding-block:3px}
}
@media (max-width:360px){ .seg{padding:0 8px 0 7px;font-size:12px} .seg svg{display:none} }
@media (prefers-reduced-motion:reduce){
  .stk img{animation:none!important}
  .js .tile.alive .stk{animation:none!important}
  .thumb{transition:none}
}

/* Korean breaks between words, not inside them; Japanese headings break between phrases where the browser can */
:lang(ko){word-break:keep-all;overflow-wrap:break-word}
:lang(ja) h1{word-break:auto-phrase}