/* Kolorz /tc/ v2.1 — only loads on page slug tc. Cocoon child theme. */
:root { --tc-black:#050408; --tc-white:#fbf9ff; --tc-muted:#aaa5b6; --tc-pink:#f06ac1; --tc-purple:#874ee9; --tc-line:rgba(255,255,255,.16); }
/* Cocoon main-column isolation; keep the shared site header and footer. */
body.kolorz-tc-page { background:var(--tc-black); }
body.kolorz-tc-page #content { width:100%!important; max-width:none!important; margin:0!important; padding:0!important; background:var(--tc-black)!important; }
body.kolorz-tc-page #content-in { display:block!important; max-width:none!important; width:100%!important; margin:0!important; padding:0!important; }
body.kolorz-tc-page #main { display:block!important; float:none!important; width:100%!important; max-width:none!important; min-width:0!important; margin:0!important; padding:0!important; border:0!important; box-shadow:none!important; background:transparent!important; }
body.kolorz-tc-page #sidebar { display:none!important; }
body.kolorz-tc-page #breadcrumb, body.kolorz-tc-page .breadcrumb,
body.kolorz-tc-page .breadcrumbs, body.kolorz-tc-page .article-header,
body.kolorz-tc-page .entry-title, body.kolorz-tc-page .date-tags,
body.kolorz-tc-page .sns-share, body.kolorz-tc-page .sns-follow { display:none!important; }
body.kolorz-tc-page #header-container, body.kolorz-tc-page #navi,
body.kolorz-tc-page .header-container, body.kolorz-tc-page .navi { background-color:#050408; }
body.kolorz-tc-page #header-container a, body.kolorz-tc-page #navi a,
body.kolorz-tc-page .header-container a { color:#f9f7ff; }
body.kolorz-tc-page #footer, body.kolorz-tc-page .footer { background:#050408; color:#bbb4c7; }
body.kolorz-tc-page #footer a { color:inherit; }
/* Scope EVERY design style to .tc-page; no leaks into other WP pages. */
.tc-page { --tc-gradient:linear-gradient(100deg,#f784bd 0%,#db70df 52%,#8b69ff 100%); color:var(--tc-white); background:var(--tc-black); width:100%; overflow:clip; isolation:isolate; font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif; line-height:1.8; font-size:16px; position:relative; }
.tc-page, .tc-page * { box-sizing:border-box; }
.tc-page :where(h1,h2,h3,p,figure) { margin:0; padding:0; color:inherit; border:none; background:transparent; text-shadow:none; }
.tc-page :where(h1,h2,h3) { line-height:1.3; font-weight:600; }
.tc-page :where(a) { text-decoration:none; }
.tc-page :where(img) { max-width:100%; display:block; height:auto; }
.tc-page :where(button) { font:inherit; cursor:pointer; }
.tc-page :where(a,button):focus-visible { outline:3px solid #d9a1ff; outline-offset:5px; }
.tc-page__grain { position:absolute; z-index:-1; inset:0; pointer-events:none; opacity:.08; background-image:radial-gradient(circle at 20% 14%,#743468 0%,transparent 25%),radial-gradient(circle at 85% 56%,#483186 0%,transparent 25%); }
.tc-container { width:min(100% - 64px,1260px); margin-inline:auto; }
.tc-section { position:relative; padding-block:clamp(100px,13vw,190px); scroll-margin-top:72px; }
.tc-eyebrow { font-size:11px; font-weight:650; letter-spacing:.28em; text-transform:uppercase; color:#e9b6dd; display:inline-block; }
.tc-display { font-family:Georgia,"Times New Roman",serif; font-weight:400!important; }
.tc-gradient-text { background:var(--tc-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.tc-copy { font-size:clamp(13px,1.25vw,15px); color:var(--tc-muted)!important; line-height:2.2; }
.tc-page h2 { font-size:clamp(28px,4vw,56px); letter-spacing:.035em; font-weight:550; line-height:1.55; }
.tc-page h3 { font-size:clamp(22px,2.4vw,33px); font-weight:550; line-height:1.48; }
.tc-section-header { margin-bottom:clamp(34px,5vw,80px); }
.tc-section-header h2 { margin-top:14px; margin-bottom:24px; }
.tc-section-header--center { text-align:center; }
.tc-button { display:inline-flex; align-items:center; justify-content:space-between; gap:24px; min-height:52px; padding:13px 25px; border-radius:100px; color:#fff!important; font-size:13px; font-weight:700; letter-spacing:.035em; line-height:1.4; transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; white-space:normal; }
.tc-button:hover { transform:translateY(-3px); }
.tc-button > span { font-size:17px; line-height:1; }
.tc-button--gradient { border:1px solid rgba(255,255,255,.25); background:var(--tc-gradient); box-shadow:0 9px 34px rgba(189,87,219,.18); }
.tc-button--gradient:hover { box-shadow:0 13px 40px rgba(189,87,219,.38); }
.tc-button--pending { border:1px solid rgba(200,158,226,.32); background:rgba(96,57,115,.25); color:#cab9cf!important; cursor:default; }
.tc-button--pending:hover { transform:none; }
.tc-button--outline { border:1px solid rgba(216,151,246,.55); background:rgba(8,6,13,.38); }
.tc-button--outline:hover { border-color:#f2a9ef; box-shadow:0 8px 28px rgba(190,83,227,.15); }
.tc-skip { position:absolute; transform:translateY(-220%); top:10px; left:20px; z-index:20; color:#fff; background:#543084; padding:8px 16px; }
.tc-skip:focus { transform:none; }

/* --- 01 HERO ------------------------------------------------ */
.tc-hero { min-height:min(920px,100svh); min-height:max(700px,90svh); display:flex; align-items:center; padding-block:clamp(80px,10vh,150px) 120px; }
.tc-hero__inner { display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); align-items:center; gap:clamp(24px,5vw,80px); position:relative; }
.tc-hero__copy { position:relative; z-index:3; }
.tc-hero__copy .tc-eyebrow { margin-bottom:28px; }
.tc-hero__title { font-size:clamp(48px,6.7vw,104px); white-space:nowrap; line-height:1.08; letter-spacing:-.048em; margin-bottom:36px!important; }
.tc-hero__lead { font-size:clamp(16px,1.7vw,23px); font-weight:550; line-height:1.95; margin-bottom:12px!important; }
.tc-hero__copy .tc-copy { margin:0 0 34px; }
/* The entire visual stage fades as ONE composited unit before section 02.
   Individual cards never become transparent while scrolling, preventing see-through flicker. */
.tc-hero__stage { position:relative; height:clamp(470px,51vw,690px); isolation:isolate; opacity:1; }
/* The outer layer is owned exclusively by scroll JS.
   Arrival and idle animations operate on separate descendants, so they cannot
   overwrite the scroll transform or create half-transparent overlapping cards. */
.tc-float {
 position:absolute; width:clamp(145px,22vw,335px); left:50%; top:48%;
 aspect-ratio:63/88; --tx:0px; --ty:0px; --twist:0deg; --tc-scale:1;
 transform:translate3d(calc(-50% + var(--tx)),calc(-50% + var(--ty)),0)
           rotate(calc(var(--base-rotate,0deg) + var(--twist))) scale(var(--tc-scale));
 opacity:1!important; filter:none!important;
 backface-visibility:hidden; -webkit-backface-visibility:hidden;
 will-change:transform;
}
.tc-float__arrival, .tc-float__idle, .tc-float__surface { position:absolute; inset:0; }
.tc-float__arrival {
 transform-origin:center center;
 animation:tc-card-arrival var(--arrival-duration,1.4s)
   cubic-bezier(.19,.70,.23,1) var(--arrival-delay,0s) both;
 backface-visibility:hidden; -webkit-backface-visibility:hidden;
 will-change:transform;
}
.tc-float__idle {
 /* Floating happens mostly in Y, with nearly imperceptible angular drift.
   After the arrival completes, drift is slow and never bounces. */
 animation:tc-card-idle var(--idle-duration,8s) ease-in-out
   calc(var(--arrival-delay,0s) + var(--arrival-duration,1.4s) + .1s) infinite alternate both;
}
.tc-float__surface {
 border-radius:12px; background:#160e21; overflow:hidden;
 box-shadow:0 28px 60px rgba(0,0,0,.65),0 0 28px rgba(189,90,227,.12);
 isolation:isolate;
}
.tc-float__surface img {
 width:100%; height:100%; object-fit:cover; border-radius:inherit;
}
/* A one-time glint passes over the MAIN card after it settles.
   The sheen is an overlay: the actual card/image remains fully opaque. */
.tc-float--1 .tc-float__surface::before {
 content:""; position:absolute; inset:-20% -90%; z-index:2; pointer-events:none;
 background:linear-gradient(110deg,transparent 43%,rgba(255,210,251,.08) 47%,
             rgba(255,255,255,.50) 50%,rgba(234,146,255,.12) 53%,transparent 58%);
 transform:translateX(-110%) skewX(-12deg); opacity:0;
 animation:tc-card-glint 1.10s ease-out 3.05s 1 both;
}
.tc-float--1 { z-index:4; --base-rotate:-7deg; top:47%; left:49%;
  --entry-x:8px; --entry-y:44px; --entry-rotate:2.2deg; --entry-scale:.94;
  --arrival-delay:.78s; --arrival-duration:2.55s; --idle-duration:8.2s;
  --idle-y:-4px; --idle-rotate:.12deg;
}
.tc-float--2 { z-index:2; --base-rotate:15deg; top:26%; left:80%; width:clamp(115px,15vw,215px);
  --entry-x:22px; --entry-y:40px; --entry-rotate:3deg; --entry-scale:.93;
  --arrival-delay:.29s; --arrival-duration:2.28s; --idle-duration:7.7s;
  --idle-y:-3px; --idle-rotate:-.10deg;
}
.tc-float--3 { z-index:1; --base-rotate:-16deg; top:15%; left:24%; width:clamp(100px,14vw,192px);
  --entry-x:-20px; --entry-y:36px; --entry-rotate:-3deg; --entry-scale:.93;
  --arrival-delay:.12s; --arrival-duration:2.32s; --idle-duration:9.0s;
  --idle-y:-4.5px; --idle-rotate:.08deg;
}
.tc-float--4 { z-index:3; --base-rotate:16deg; top:86%; left:82%; width:clamp(116px,15vw,205px);
  --entry-x:18px; --entry-y:37px; --entry-rotate:2.5deg; --entry-scale:.94;
  --arrival-delay:.52s; --arrival-duration:2.36s; --idle-duration:8.6s;
  --idle-y:-3.5px; --idle-rotate:-.10deg;
}
/* Longer, soft fade and subtle rise: background cards then main card. */
@keyframes tc-card-arrival {
  0% { opacity:0; transform:translate3d(var(--entry-x),var(--entry-y),0) rotate(var(--entry-rotate)) scale(var(--entry-scale)); }
  25% { opacity:.12; }
  58% { opacity:.55; }
  84% { opacity:.91; }
  100% { opacity:1; transform:translate3d(0,0,0) rotate(0deg) scale(1); }
}
/* 7–9 seconds per half-cycle: subtle vertical bob, almost zero rotation. */
@keyframes tc-card-idle {
  0% { transform:translate3d(0,0,0) rotate(0deg); }
  100% { transform:translate3d(0,var(--idle-y,-4px),0) rotate(var(--idle-rotate,.1deg)); }
}
@keyframes tc-card-glint {
 0%,15% { opacity:0; transform:translateX(-110%) skewX(-12deg); }
 24% { opacity:1; }
 78% { opacity:1; }
 100% { opacity:0; transform:translateX(110%) skewX(-12deg); }
}
/* Darken distant cards with a stationary overlay, not card opacity. */
.tc-float:not(.tc-float--1) .tc-float__surface::after {
 content:""; position:absolute; inset:0; background:rgba(6,4,12,.13);
 pointer-events:none; border-radius:inherit;
}
/* Kolorz original animated scroll cue: a pearl of pink light travels down a hairline.
   Linked to #tc-select; the anchor remains usable without JavaScript. */
.tc-scroll-hint {
 position:absolute; z-index:6; bottom:21px; left:50%; transform:translateX(-50%);
 display:flex; flex-direction:column; align-items:center; gap:10px;
 width:98px; padding:10px 8px 0; text-decoration:none!important;
 color:#dcd3e3!important; opacity:0;
 animation:tc-cue-arrive 1.25s ease 1.2s both;
}
.tc-scroll-hint__label {
 font-size:10px; line-height:1.4; letter-spacing:.34em; font-weight:500;
 animation:tc-cue-label 3.4s ease-in-out 2.7s infinite;
}
.tc-scroll-hint__track {
 position:relative; display:block; width:1px; height:69px;
 background:linear-gradient(to bottom,rgba(245,170,232,.1) 0%,rgba(191,146,226,.45) 52%,rgba(111,65,164,.15) 100%);
}
.tc-scroll-hint__track::before {
 content:""; position:absolute; left:50%; top:0; width:3px; height:19px;
 border-radius:100px; transform:translate3d(-50%,-4px,0);
 background:linear-gradient(to bottom,#ff9cd9,#a276ff);
 box-shadow:0 0 11px rgba(222,112,247,.55),0 0 20px rgba(207,103,242,.22);
 animation:tc-cue-travel 2.3s cubic-bezier(.52,.08,.43,1) 2.35s infinite;
}
.tc-scroll-hint__track::after {
 content:""; position:absolute; bottom:-1px; left:50%; width:7px; height:7px;
 border-right:1px solid rgba(233,174,253,.7); border-bottom:1px solid rgba(233,174,253,.7);
 transform:translateX(-50%) rotate(45deg);
}
.tc-scroll-hint:hover .tc-scroll-hint__label,
.tc-scroll-hint:focus-visible .tc-scroll-hint__label { color:#f5a7df; }
@keyframes tc-cue-arrive {
 from { opacity:0; transform:translate(-50%,12px); }
 to { opacity:1; transform:translate(-50%,0); }
}
@keyframes tc-cue-travel {
 0% { opacity:0; transform:translate3d(-50%,-4px,0) scaleY(.7); }
 22% { opacity:1; }
 75% { opacity:1; }
 100% { opacity:0; transform:translate3d(-50%,55px,0) scaleY(.7); }
}
@keyframes tc-cue-label { 0%,100% { opacity:.68; } 50% { opacity:1; } }

/* --- 02 PRODUCT GATEWAY ------------------------------------ */
.tc-choose { padding-top:100px; }
.tc-product-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.6vw,32px); }
.tc-product { border:1px solid var(--tc-line); border-radius:20px; background:linear-gradient(145deg,rgba(34,24,41,.68),rgba(10,8,14,.2) 64%); padding:clamp(24px,3vw,44px); min-width:0; display:flex; flex-direction:column; transition:border-color .3s ease; }
.tc-product:hover { border-color:rgba(222,142,245,.55); }
.tc-product__visual { height:clamp(290px,33vw,440px); display:flex; justify-content:center; align-items:center; min-width:0; position:relative; margin-bottom:27px; }
.tc-product__visual:before { content:""; position:absolute; width:70%; height:65%; background:radial-gradient(ellipse,#9d54dd44,transparent 70%); filter:blur(24px); }
.tc-product__sample { position:relative; height:96%; width:auto; max-width:85%; object-fit:contain; border-radius:8px; transform:rotate(6deg); box-shadow:0 20px 40px #000a; transition:transform .5s ease; }
.tc-product:hover .tc-product__sample { transform:rotate(2deg) translateY(-10px); }
.tc-product__copy { display:flex; flex-direction:column; flex:1; align-items:flex-start; }
.tc-product__index { font-size:10px; letter-spacing:.19em; color:#cc9ddd; margin-bottom:10px; }
.tc-product__copy h3 { margin-bottom:14px; }
.tc-product__copy p { font-size:13px; line-height:2; color:var(--tc-muted); max-width:38em; margin-bottom:26px; }
.tc-product__copy .tc-button { margin-top:auto; }
.tc-profile-card { width:clamp(175px,20vw,240px); aspect-ratio:63/88; border-radius:12px; border:3px solid #ba8dd8; background:linear-gradient(145deg,#311840,#101020); box-shadow:0 25px 48px #000a,0 0 25px #a651d63a; padding:8px; position:relative; z-index:1; transform:rotate(-7deg); overflow:hidden; transition:transform .5s ease; }
.tc-product:hover .tc-profile-card { transform:rotate(-2deg) translateY(-10px); }
.tc-profile-card__photo { width:100%; height:62%; background:radial-gradient(circle at 65% 25%,#a94cba 0%,#472768 35%,#171023 78%); display:flex; align-items:center; flex-direction:column; justify-content:center; border-radius:5px 5px 2px 2px; border:1px solid #dc9bea77; overflow:hidden; }
.tc-profile-card__photo img { width:100%; height:100%; object-fit:cover; }
.tc-profile-card__photo-mark { font-size:clamp(44px,6vw,77px); line-height:1; color:#efc5ff; text-shadow:0 0 24px #c774ef; }
.tc-profile-card__photo-label { font-size:9px; color:#f4dcff; letter-spacing:.24em; margin-top:12px; }
.tc-profile-card__info { display:flex; flex-direction:column; justify-content:space-evenly; height:38%; padding:4px 4px 0; color:white; font-family:Georgia,serif; line-height:1.2; }
.tc-profile-card__number { font:9px sans-serif; color:#dfaaf3; }
.tc-profile-card__info strong { font-size:clamp(17px,2vw,25px); letter-spacing:.06em; }
.tc-profile-card__info > span:not(.tc-profile-card__number) { font-size:9px; }
.tc-profile-card__stats { display:flex; justify-content:space-between; gap:6px; font:9px sans-serif; }
.tc-profile-card__stats span { white-space:nowrap; }
.tc-profile-card__stats b { color:#ee85dd; }

/* --- 03 FLIP ----------------------------------------------- */
.tc-flip-section { padding-top:clamp(90px,12vw,160px); }
.tc-flip-layout { display:grid; grid-template-columns:minmax(250px,.86fr) minmax(0,1.14fr); gap:clamp(32px,6vw,110px); align-items:center; }
.tc-flip-demo { display:flex; align-items:center; flex-direction:column; gap:12px; perspective:1400px; }
.tc-flip-card { aspect-ratio:63/88; width:min(100%,360px); position:relative; perspective:1400px; filter:drop-shadow(0 24px 24px #0008); }
.tc-flip-card__inner { position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .9s cubic-bezier(.2,.8,.24,1); }
.tc-flip-card.is-flipped .tc-flip-card__inner { transform:rotateY(180deg); }
.tc-flip-card__face { position:absolute; inset:0; border-radius:12px; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden; background:linear-gradient(135deg,#3b2447,#050408); box-shadow:0 0 24px rgba(197,123,222,.2); }
.tc-flip-card__face img { width:100%; height:100%; object-fit:cover; }
.tc-flip-card__back { transform:rotateY(180deg); }
.tc-flip-trigger { display:inline-flex; align-items:center; gap:11px; padding:8px 16px; background:transparent; color:var(--tc-white); border:0; margin-top:12px; font-size:13px; }
.tc-flip-trigger__icon { font-size:27px; line-height:1; color:#d889ff; }
.tc-flip-trigger:hover .tc-flip-trigger__icon { transform:rotate(35deg); }
.tc-card-caption { font-size:10px; letter-spacing:.22em; color:#c6b2d6; }
.tc-back-choices__heading { margin-bottom:30px; }
.tc-back-choices__heading h3 { margin-top:12px; font-size:clamp(21px,2.6vw,30px); }
.tc-back-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.tc-back-choice { border:1px solid transparent; border-radius:9px; background:transparent; color:#ccc0d4; text-align:center; padding:7px; min-width:0; transition:transform .2s,border-color .2s; }
.tc-back-choice:hover { transform:translateY(-4px); }
.tc-back-choice.is-active { border-color:#bc75e7; background:rgba(177,97,214,.12); }
.tc-back-choice img { aspect-ratio:63/88; width:100%; height:auto; object-fit:cover; border-radius:5px; }
.tc-back-choice span { display:block; font:9px/1.4 sans-serif; letter-spacing:.1em; margin-top:8px; }
.tc-note { font-size:11px; color:#92899a!important; line-height:1.9; margin-top:22px!important; }

/* --- 04 GALLERY -------------------------------------------- */
.tc-gallery-section { padding-top:clamp(110px,14vw,180px); }
.tc-gallery-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:42px; }
.tc-gallery-heading h2 { margin-top:12px; }
.tc-gallery-controls { display:flex; gap:10px; flex:0 0 auto; }
.tc-gallery-controls button { width:44px; height:44px; border-radius:50%; color:#fff; border:1px solid rgba(255,255,255,.4); background:transparent; transition:background .2s; }
.tc-gallery-controls button:hover { background:#6f3b86; }
.tc-gallery { display:flex; gap:clamp(16px,2.4vw,29px); overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x mandatory; scroll-padding-inline:10px; -webkit-overflow-scrolling:touch; padding:10px 5px 22px; scrollbar-width:thin; scrollbar-color:#714d8d transparent; }
.tc-gallery.is-dragging { scroll-snap-type:none; cursor:grabbing; user-select:none; }
.tc-gallery__item { flex:0 0 clamp(175px,19vw,255px); scroll-snap-align:start; min-width:0; }
.tc-gallery__image { aspect-ratio:63/88; overflow:hidden; border-radius:10px; box-shadow:0 10px 22px #000a; background:#1c1326; border:1px solid #594165; }
.tc-gallery__image img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease,filter .5s ease; }
.tc-gallery__item:hover img { transform:scale(1.035); filter:saturate(1.08); }
.tc-gallery__item figcaption { display:flex; justify-content:space-between; align-items:baseline; gap:9px; padding-top:14px; }
.tc-gallery__item strong { font:normal 14px Georgia,serif; letter-spacing:.07em; }
.tc-gallery__item figcaption span { font-size:10px; color:var(--tc-muted); }
.tc-gallery-hint { font-size:10px; letter-spacing:.18em; color:#a9a0ae!important; text-align:right; margin-top:14px!important; }

/* --- 05 FINAL CTA ------------------------------------------ */
.tc-last { padding-block:clamp(140px,20vw,270px) clamp(140px,15vw,200px); text-align:center; }
.tc-last__light { pointer-events:none; position:absolute; left:50%; top:44%; transform:translate(-50%,-50%); width:60vw; height:420px; max-width:820px; background:radial-gradient(ellipse at center,rgba(138,55,156,.22),transparent 68%); filter:blur(35px); }
.tc-last__inner { position:relative; }
.tc-last h2 { font-size:clamp(31px,5vw,68px); line-height:1.45; margin:20px 0; }
.tc-last .tc-copy { margin-bottom:34px; }
.tc-last__buttons { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
.tc-last__buttons .tc-button { min-width:min(100%,290px); }
.tc-last__pending { color:#bbaed0!important; font-size:12px; margin:20px auto 0!important; max-width:600px; }
.tc-last__top { display:inline-block; color:#aea5ba!important; letter-spacing:.2em; font-size:10px; margin-top:70px; }

/* Hero copy remains a one-time load reveal. Sections below use actual
   scroll-position progress so copy emerges from below as it approaches center. */
.tc-hero__copy.tc-reveal.tc-inview { animation-duration:1.25s; }
@keyframes tc-appear { from { opacity:.45; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
.tc-hero .tc-reveal.tc-inview { animation:tc-appear 1.25s cubic-bezier(.2,.75,.2,1) both; }

/* Progressive enhancement: without JS (or with reduce-motion), all text is visible.
   JS sets the inline progress values BEFORE adding the ready class. */
.tc-page.tc-text-motion-ready .tc-scroll-copy {
 opacity:var(--tc-text-opacity,1);
 transform:translate3d(0,var(--tc-text-rise,0px),0);
 filter:blur(var(--tc-text-blur,0px));
 will-change:opacity,transform;
}
/* v1.4 parent reveal must not compete with v1.5 scroll-driven child text. */
.tc-page.tc-text-motion-ready .tc-section:not(.tc-hero) .tc-reveal.tc-inview { animation:none; }

@media (max-width:1020px) {
 .tc-hero__title { font-size:clamp(43px,6.2vw,76px); }
 .tc-hero__stage { height:520px; }
 .tc-float--1 { width:270px; }
 .tc-float--2,.tc-float--3,.tc-float--4 { width:150px; }
 .tc-product { padding:25px; }
 .tc-product__visual { height:330px; }
 .tc-profile-card { width:205px; }
}
@media (max-width:760px) {
 .tc-container { width:min(100% - 36px,590px); }
 .tc-section { padding-block:90px; }
 .tc-hero { min-height:auto; padding-top:80px; padding-bottom:85px; }
 .tc-hero__inner { grid-template-columns:1fr; gap:12px; }
 .tc-hero__copy { text-align:left; }
 .tc-hero__title { font-size:clamp(44px,10vw,74px); margin-bottom:22px!important; }
 .tc-hero__lead { font-size:17px; }
 .tc-hero__copy .tc-eyebrow { margin-bottom:18px; }
 .tc-hero__stage { width:100%; height:clamp(355px,85vw,530px); }
 .tc-float--1 { width:clamp(195px,48vw,270px); top:46%; left:49%; }
 .tc-float--2 { width:clamp(110px,30vw,160px); top:33%; left:82%; }
 .tc-float--3 { width:clamp(100px,26vw,140px); top:20%; left:16%; }
 .tc-float--4 { width:clamp(100px,28vw,140px); top:77%; left:80%; }
 /* On mobile: same gentle upward entrance; no large lateral sweeps. */
 .tc-float--1 { --entry-x:6px; --entry-y:32px; }
 .tc-float--2 { --entry-x:14px; --entry-y:30px; }
 .tc-float--3 { --entry-x:-14px; --entry-y:27px; }
 .tc-float--4 { --entry-x:12px; --entry-y:28px; }
 .tc-scroll-hint { bottom:44px; }
 .tc-scroll-hint__track { height:43px; }
 @keyframes tc-cue-travel { 0% { opacity:0; transform:translate3d(-50%,-4px,0) scaleY(.7); } 22% { opacity:1; } 75% { opacity:1; } 100% { opacity:0; transform:translate3d(-50%,29px,0) scaleY(.7); } }
 .tc-choose { padding-top:50px; }
 .tc-product-grid { grid-template-columns:1fr; gap:22px; }
 .tc-product__visual { height:360px; }
 .tc-profile-card { width:220px; }
 .tc-product__copy h3 { font-size:27px; }
 .tc-flip-layout { grid-template-columns:1fr; gap:65px; }
 .tc-flip-card { max-width:310px; }
 .tc-back-grid { gap:10px; }
 .tc-gallery__item { flex-basis:clamp(175px,49vw,235px); }
 .tc-gallery-heading { align-items:end; }
 .tc-gallery-controls button { width:40px; height:40px; }
 .tc-last__buttons { flex-direction:column; align-items:center; }
 .tc-last__buttons .tc-button { width:min(100%,380px); }
}
@media (max-width:420px) {
 .tc-hero__title { font-size:clamp(39px,10vw,46px); }
 .tc-page h2 { font-size:clamp(27px,7.5vw,35px); }
 .tc-back-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
 .tc-back-choice { padding:4px; }
 .tc-product__visual { height:310px; }
 .tc-profile-card { width:190px; }
 .tc-gallery-heading { align-items:start; }
}
@media (prefers-reduced-motion:reduce) {
 .tc-page *, .tc-page *::before, .tc-page *::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
 .tc-hero__stage { opacity:1!important; }
 .tc-float { will-change:auto!important; --tx:0px!important; --ty:0px!important; --twist:0deg!important; --tc-scale:1!important; }
 .tc-reveal.tc-inview { animation:none!important; }
 .tc-page.tc-text-motion-ready .tc-scroll-copy { opacity:1!important; transform:none!important; filter:none!important; will-change:auto!important; }
 .tc-scroll-hint, .tc-scroll-hint__label, .tc-scroll-hint__track::before { animation:none!important; opacity:1!important; }
 .tc-scroll-hint { transform:translateX(-50%)!important; }
 .tc-float__arrival, .tc-float__idle,
 .tc-float--1 .tc-float__surface::before { animation:none!important; transform:none!important; }
 .tc-float__arrival, .tc-float__idle { will-change:auto!important; }
}

/* ============================================================
   KOLORZ /TC v2.0 — Scenes, Before/After, Comparison, Flow, FAQ
   Keep v1.5 hero, show-case flip, and gallery animations intact.
   ============================================================ */
/* 02 / SCENE v2.1: two-column fixed-position story & large image. */
.tc-page { --tc-rose:#f784bd; --tc-lilac:#a17aff; }
.tc-scenes {
  --tc-scene-top:clamp(68px,8svh,98px);
  min-height:345svh;
  padding:0!important;
  isolation:isolate;
  background:radial-gradient(ellipse at 77% 35%,rgba(107,41,126,.09),transparent 48%);
}
.tc-scenes__layout {
  position:sticky;
  top:var(--tc-scene-top);
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr);
  gap:clamp(34px,6vw,105px);
  align-items:center;
  height:calc(100svh - var(--tc-scene-top));
  min-height:0;
  padding-block:clamp(8px,2svh,22px);
}
.tc-scenes__content { min-width:0; align-self:center; }
.tc-scenes__heading { margin-bottom:0; }
.tc-scenes__heading h2 { margin:12px 0 16px; }
.tc-scenes__heading .tc-copy { font-size:clamp(12px,1.25vw,15px); }
.tc-scenes__tabs { display:flex; flex-wrap:wrap; gap:9px; margin:clamp(20px,3vw,38px) 0 clamp(28px,4vw,47px); }
.tc-scene-tab { background:#08070d; border:1px solid #735774; border-radius:100px; padding:10px 15px; min-height:40px; color:#e8dfea; font-size:12px; line-height:1.4; white-space:nowrap; transition:background .4s ease,color .4s ease,box-shadow .4s ease, border-color .4s ease; }
.tc-scene-tab.is-active { background:linear-gradient(110deg,#f785bd,#bd72e5,#8662df); border-color:#e5b9e4; color:#160d18; font-weight:700; box-shadow:0 6px 22px #d868b52d; }
.tc-scene-tab:not(.is-active):hover { background:#2a172c; border-color:#c887d4; }
/* The descriptions all occupy the SAME grid cell, so none travels up the page. */
.tc-scenes__descriptions { display:grid; grid-template-columns:minmax(0,1fr); align-items:center; min-height:clamp(170px,21svh,260px); position:relative; }
.tc-scene-description { grid-area:1/1; min-width:0; align-self:center; opacity:0; visibility:hidden; transform:translate3d(0,13px,0); transition:opacity .7s ease,transform .8s cubic-bezier(.22,.68,.25,1),visibility 0s linear .8s; pointer-events:none; }
.tc-scene-description.is-active { opacity:1; visibility:visible; transform:translate3d(0,0,0); transition:opacity .7s ease,transform .8s cubic-bezier(.22,.68,.25,1),visibility 0s; pointer-events:auto; }
.tc-scene-description .tc-eyebrow { color:#db91d3; font-size:11px; }
.tc-scene-description h3 { font-size:clamp(23px,2.05vw,30px); line-height:1.55; margin:12px 0 14px; max-width:16em; }
.tc-scene-description .tc-copy { font-size:clamp(12px,1.1vw,14px); max-width:36em; }
.tc-scenes__helper { display:inline-flex; align-items:center; gap:15px; color:#91829d; letter-spacing:.2em; font-size:10px; margin-top:15px; }
.tc-scenes__helper span { display:inline-block; font-size:15px; color:#d88bda; }
/* Borderless right column: let the smartphone occupy roughly 70% of viewport height. */
.tc-scenes__visual { position:relative; display:grid; place-items:center; width:100%; height:min(76svh,780px); min-height:440px; overflow:hidden; border:0; background:radial-gradient(ellipse at 50% 60%,rgba(128,64,149,.13),transparent 68%); isolation:isolate; }
.tc-scene-panel { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; visibility:hidden; transform:translate3d(0,18px,0) scale(.985); transition:opacity .75s ease,transform .85s cubic-bezier(.22,.68,.25,1),visibility 0s linear .85s; pointer-events:none; }
.tc-scene-panel.is-active { opacity:1; visibility:visible; transform:translate3d(0,0,0) scale(1); transition:opacity .75s ease,transform .85s cubic-bezier(.22,.68,.25,1),visibility 0s; pointer-events:auto; }
.tc-scene-panel__disclaimer { position:absolute; bottom:5px; inset-inline:8px; text-align:center; font-size:9px; letter-spacing:.015em; color:#aa9aac; }
.tc-phone { --phone-text:#23222a; width:clamp(270px,25vw,360px); height:calc(100% - 33px); max-height:740px; border-radius:38px; border:6px solid #34313d; outline:1px solid #888098; background:#f5f2f7; color:var(--phone-text); box-shadow:0 23px 50px #000b,0 0 30px #a759b728; padding:16px 14px 12px; position:relative; display:flex; flex-direction:column; overflow:hidden; font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN",sans-serif; line-height:1.5; }
.tc-phone :is(span,strong,p,div) { color:inherit; }
.tc-phone__top { display:flex; align-items:center; justify-content:space-between; font-size:10px; font-weight:700; height:18px; flex:0 0 auto; }
.tc-phone__notch { width:54px; height:14px; background:#161419; border-radius:100px; }
.tc-phone__bar { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 4px 10px; border-bottom:1px solid #aaa5b822; flex:0 0 auto; font-size:16px; }
.tc-phone__bar strong { font-size:14px; }
.tc-phone__bar--post { font-size:13px; }
.tc-phone__messages { background:#dce4f1; margin-inline:-14px; padding:19px 12px 6px; flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:10px; overflow:hidden; }
.tc-phone__bubble { background:white; border-radius:14px; padding:8px 9px; font-size:11px; max-width:84%; box-shadow:0 2px 6px #0001; }
.tc-phone__bubble--right { background:#b0e59d; align-self:end; }
.tc-phone__attachment { margin-left:9px; height:42%; min-height:105px; width:46%; background:#372145; border-radius:6px; overflow:hidden; box-shadow:0 4px 12px #26162850; color:white!important; display:grid; place-items:center; font-size:11px; }
.tc-phone__attachment img { width:100%; height:100%; object-fit:cover; }
.tc-phone__bottom { margin-top:auto; padding:9px 2px; background:#fff; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:4px; font-size:13px; }
.tc-phone__bottom span { background:#f6f5f8; color:#aaa!important; border:1px solid #e6e4e9; border-radius:24px; padding:6px 10px; flex:1; font-size:10px; }
.tc-phone__post-photo { flex:1; min-height:0; margin:0 -14px; background:linear-gradient(145deg,#d575ae,#382247); display:grid; place-items:center; color:white!important; overflow:hidden; }
.tc-phone__post-photo img { width:100%; height:100%; object-fit:contain; }
.tc-phone__actions { flex:0 0 auto; padding:8px 2px 5px; font-size:15px; }
.tc-phone__actions span { float:right; }
.tc-phone__post-caption { font-size:10px; line-height:1.7; padding:0 2px 6px!important; }
.tc-phone__post-body { display:flex; gap:6px; padding:11px 0 12px; align-items:start; font-size:11px; }
.tc-phone__post-body strong { display:block; font-size:12px; }
.tc-phone__post-body small { display:block; color:#8f8996; font-size:10px; }
.tc-phone__post-body p { margin-top:6px!important; font-size:11px; line-height:1.55; }
.tc-phone__user-dot { border-radius:50%; display:grid; place-items:center; background:#d680be; width:26px; height:26px; flex:0 0 26px; color:white!important; }
.tc-phone__social-card { flex:1; min-height:0; border-radius:8px; overflow:hidden; background:#130b21; display:grid; place-items:center; }
.tc-phone__social-card img { max-width:100%; width:100%; height:100%; object-fit:contain; }
.tc-phone__homebar { display:block; width:42%; height:3px; border-radius:6px; background:#222; margin:4px auto 0; flex:0 0 auto; }
.tc-print-mock { width:min(90%,510px); height:88%; position:relative; display:flex; align-items:center; justify-content:center; }
.tc-print-mock img { position:absolute; width:clamp(210px,22vw,300px); height:auto; aspect-ratio:63/88; object-fit:cover; border:2px solid #cc9bd3; border-radius:8px; box-shadow:0 18px 32px #000b,0 0 22px #d77ab055; }
.tc-print-mock__back { transform:translate(26%,-3%) rotate(17deg); filter:brightness(.85); }
.tc-print-mock__front { transform:translate(-22%,5%) rotate(-12deg); }
.tc-scene-placeholder { padding:20px; background:#3e2848; border:1px solid #d783c4; border-radius:8px; color:white; }

/* 03 Transformation */
.tc-before { padding-block:clamp(110px,16vw,210px); }
.tc-transform-grid { display:grid; grid-template-columns:minmax(0,1fr) 35px minmax(0,1fr) 35px minmax(0,1fr); gap:clamp(12px,2.1vw,26px); align-items:center; }
.tc-transform-card { min-width:0; text-align:center; transition:transform .75s cubic-bezier(.19,.70,.24,1),opacity .75s ease; }
.tc-transform-card__number { display:block; margin-bottom:15px; font-size:11px; letter-spacing:.17em; color:#e39bce; }
.tc-transform-card__art { width:100%; height:clamp(270px,30vw,395px); overflow:hidden; border-radius:15px; border:1px solid #79627d66; background:#1a1422; display:flex; align-items:center; justify-content:center; position:relative; }
.tc-transform-card__art img { width:100%; height:100%; object-fit:contain; }
.tc-transform-card__art--original { background:linear-gradient(145deg,#1b1826,#47314d); }
.tc-transform-card__art--design { background:radial-gradient(circle at 50% 45%,#57366f,#0b0815 80%); padding:14px; }
.tc-transform-card__art--design img { filter:drop-shadow(0 14px 20px #000a); }
.tc-transform-card__art--share { background:#1a1621; padding:12px; }
.tc-transform-card figcaption { font-size:13px; color:#b8a9c5; margin-top:18px; }
.tc-photo-placeholder { color:#dbbfdb; display:block; font-size:12px; text-align:center; line-height:2; }
.tc-photo-placeholder > span { font-size:56px; display:block; }
.tc-photo-placeholder small { opacity:.55; font-size:8px; }
.tc-transform-arrow { color:#d876d5; font-size:30px; text-align:center; }
.tc-share-mini { align-self:stretch; width:min(100%,270px); border-radius:15px; padding:10px; background:#fcf8fc; color:#191321; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; box-shadow:0 14px 33px #0005; }
.tc-share-mini span { color:#24182d; align-self:stretch; display:block; text-align:left; font-size:10px; }
.tc-share-mini span span { float:right; width:auto; }
.tc-share-mini img { max-height:260px; width:100%; height:77%; object-fit:contain; }
.tc-before__note { max-width:900px; text-align:center; margin:26px auto 0!important; }
.tc-page.tc-v2-motion-ready .tc-transform-card:not(.is-visible) { transform:translate3d(0,28px,0); opacity:.14; }

/* 06 Compare product specs */
.tc-choose { padding-block:clamp(110px,14vw,190px); }
.tc-price-reference { max-width:840px; margin:0 auto 50px; padding:27px clamp(20px,3vw,36px); border:1px solid #b065c14d; border-radius:16px; background:linear-gradient(125deg,#140c19,#201126,#101017); text-align:center; }
.tc-price-reference strong { display:block; font-size:clamp(18px,2.4vw,29px); font-weight:650; margin-block:10px; }
.tc-price-reference p { color:#bdb0c5!important; max-width:630px; margin-inline:auto!important; font-size:12px; line-height:1.8; }
.tc-product__spec { margin:18px 0 25px; border-top:1px solid #ffffff27; }
.tc-product__spec div { display:grid; grid-template-columns:86px 1fr; gap:14px; border-bottom:1px solid #ffffff1c; padding:12px 0; font-size:11px; line-height:1.85; }
.tc-product__spec dt { color:#d6a7dc; font-weight:700; }
.tc-product__spec dd { margin:0; color:#c8bdce; }

/* 07 process */
.tc-work { padding-block:clamp(100px,14vw,180px); }
.tc-work-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; padding:0; list-style:none; }
.tc-work-grid li { border-top:1px solid #9c6488a6; padding:28px 18px 26px 0; min-width:0; }
.tc-work__num { width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(135deg,#f58abe,#9d68ef); color:#180c1a; font:700 13px Arial,sans-serif; }
.tc-work-grid h3 { font-size:19px; margin:17px 0 12px!important; }
.tc-work-grid p { font-size:13px; line-height:2.1; color:#aaa5b6!important; }

/* 08 FAQ */
.tc-faq { padding-block:clamp(90px,13vw,165px); }
.tc-faq__layout { display:grid; grid-template-columns:minmax(230px,.7fr) minmax(0,1.3fr); align-items:start; gap:clamp(32px,7vw,120px); }
.tc-faq__heading { position:sticky; top:95px; }
.tc-faq__heading h2 { margin-top:15px; }
.tc-faq__questions { border-top:1px solid #b57eb07a; }
.tc-faq__item { border-bottom:1px solid #b57eb06b; }
.tc-faq__item summary { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 6px; font-size:14px; line-height:1.8; font-weight:600; color:#fff; cursor:pointer; list-style:none; }
.tc-faq__item summary::-webkit-details-marker { display:none; }
.tc-faq__item summary::after { content:"+"; display:grid; place-items:center; flex:0 0 25px; height:25px; border-radius:50%; color:#eab1e4; border:1px solid #eab1e47a; font-size:18px; font-weight:400; transition:transform .24s ease; }
.tc-faq__item[open] summary::after { content:"−"; }
.tc-faq__item p { font-size:13px; line-height:2.1; color:#c0b4c7!important; padding:0 32px 25px 6px!important; }

/* 09: CTA is the same as v1.5 */
@media (max-width:1000px) {
 .tc-transform-grid { grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr) 22px minmax(0,1fr); gap:9px; }
 .tc-transform-arrow { font-size:22px; }
}
@media (max-width:760px) {
 .tc-before { padding-block:90px; }
 .tc-transform-grid { grid-template-columns:1fr; gap:12px; max-width:350px; margin-inline:auto; }
 .tc-transform-card__art { height:clamp(280px,80vw,410px); }
 .tc-transform-arrow { transform:rotate(90deg); margin:0 auto; }
 .tc-product__spec div { grid-template-columns:78px 1fr; }
 .tc-work-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
 .tc-faq__layout { grid-template-columns:1fr; gap:22px; }
 .tc-faq__heading { position:static; }
}
@media (max-width:420px) {
 .tc-work-grid { gap:10px; }
 .tc-work-grid li { padding:23px 4px 22px 0; }
 .tc-work-grid h3 { font-size:16px; }
 .tc-work-grid p { font-size:12px; }
}
@media (prefers-reduced-motion:reduce) {
 .tc-scene-panel { transition:none!important; }
 .tc-page.tc-v2-motion-ready .tc-transform-card:not(.is-visible) { transform:none!important; opacity:1!important; }
}

/* Scene layout responsive overrides: existing hero/showcase/gallery rules unchanged. */
@media (max-width:1050px) {
 .tc-scenes__layout { grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:25px; }
 .tc-scenes__tabs { gap:7px; }
 .tc-scene-tab { padding:9px 12px; font-size:11px; }
 .tc-phone { width:clamp(230px,26vw,325px); }
}
@media (max-width:760px) {
 .tc-scenes { --tc-scene-top:clamp(46px,7svh,62px); min-height:355svh; }
 .tc-scenes__layout { height:calc(100svh - var(--tc-scene-top)); display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); align-content:center; gap:2px; padding-block:4px; }
 .tc-scenes__content { align-self:end; }
 .tc-scenes__heading h2 { font-size:clamp(28px,7.4vw,39px); margin:4px 0 8px; line-height:1.35; }
 .tc-scenes__heading .tc-copy { font-size:clamp(11px,2.9vw,13px); line-height:1.7; }
 .tc-scenes__tabs { margin:12px 0 14px; gap:6px; }
 .tc-scene-tab { font-size:10px; padding:7px 11px; min-height:33px; }
 .tc-scenes__descriptions { min-height:115px; }
 .tc-scene-description .tc-eyebrow { font-size:9px; }
 .tc-scene-description h3 { font-size:clamp(20px,5.5vw,25px); margin:3px 0 4px; line-height:1.3; }
 .tc-scene-description .tc-copy { font-size:11px; line-height:1.65; }
 .tc-scenes__helper { display:none; }
 .tc-scenes__visual { height:100%; min-height:0; }
 .tc-phone { width:clamp(188px,56vw,260px); height:min(calc(100% - 34px),460px); min-height:0; max-height:none; border-radius:27px; border-width:4px; padding:9px 8px 8px; }
 .tc-phone__messages { margin-inline:-8px; }
 .tc-phone__post-photo { margin-inline:-8px; }
 .tc-phone__top { font-size:8px; }
 .tc-phone__bar { padding:8px 2px 6px; }
 .tc-phone__bar strong { font-size:11px; }
 .tc-phone__bubble { font-size:9px; }
 .tc-phone__attachment { min-height:75px; }
 .tc-phone__post-caption { font-size:8px; }
 .tc-print-mock { width:min(90%,340px); height:100%; }
 .tc-print-mock img { width:min(42vw,190px); }
 .tc-scene-panel__disclaimer { font-size:8px; bottom:0; }
}
@media (max-width:390px) {
 .tc-scenes__heading .tc-copy { font-size:10px; }
 .tc-scenes__tabs { gap:4px; margin:9px 0 9px; }
 .tc-scene-tab { font-size:9px; padding:6px 9px; }
 .tc-scenes__descriptions { min-height:105px; }
 .tc-scenes__visual { height:100%; }
}
@media (max-height:690px) and (max-width:760px) {
 .tc-scenes__heading h2 { font-size:26px; }
 .tc-scenes__heading .tc-copy { font-size:10px; }
 .tc-scenes__tabs { margin:7px 0 8px; }
 .tc-scenes__descriptions { min-height:100px; }
 .tc-phone { width:min(47vw,200px); }
}
@media (prefers-reduced-motion:reduce) {
 .tc-scene-description, .tc-scene-panel { transform:none!important; transition:none!important; }
}