/* ==========================================================================
   AWAKE — hero-motion.css
   Optional hero motion for the home-page variants (index-v2.html, index-v3.html).
   The original home page (index.html) does not load this file.
   All motion is disabled for visitors who prefer reduced motion.
   ========================================================================== */
.hero-scene { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1.05; border-radius: var(--radius); box-shadow: var(--shadow-md); background: var(--ice); }
.hero-scene g { transform-box: view-box; }

/* ----- Version 2: notebooks gently float + brand words appear one by one ----- */
@keyframes fx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
.fx-float { animation: fx-float 6s ease-in-out infinite; will-change: transform; }
.fx-float--b { animation-duration: 7s; animation-delay: -2.2s; }
.fx-float--c { animation-duration: 6.5s; animation-delay: -4s; }

@keyframes fx-word { from { opacity: 0; transform: translateY(0.7em); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
.hero__badge .fx-word { display: inline-block; opacity: 0; animation: fx-word 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: calc(0.7s + var(--i) * 0.65s); }
.hero__badge small.fx-word { display: block; width: max-content; }

/* ----- Version 3: notebooks arrive one by one, 3rd opens, pencil writes, closes ----- */
@keyframes fx-in { from { opacity: 0; transform: translateY(90px) scale(0.96); } to { opacity: 1; transform: none; } }
.fx-story .fx-in { animation: fx-in 1s cubic-bezier(0.22, 1, 0.36, 1) both; }
.fx-story .fx-in--1 { animation-delay: 0.3s; }
.fx-story .fx-in--2 { animation-delay: 1.2s; }
.fx-story .fx-in--3 { animation-delay: 2.1s; }

.fx-story { --cycle: 14s; --cycle-delay: 3.6s; }
@keyframes fx-shift {
  0% { transform: translate(0,0); }
  7%, 63% { transform: translate(220px,-30px); }
  70%, 100% { transform: translate(0,0); }
}
@keyframes fx-cover {
  0% { transform: scaleX(1); }
  7%, 63% { transform: scaleX(-1); }
  70%, 100% { transform: scaleX(1); }
}
@keyframes fx-label {
  0%, 2% { opacity: 1; }
  3.5%, 66% { opacity: 0; }
  69%, 100% { opacity: 1; }
}
.fx-story .fx-shift { animation: fx-shift var(--cycle) cubic-bezier(0.45, 0, 0.25, 1) var(--cycle-delay) infinite both; }
.fx-story .fx-cover { transform-origin: 150px 1000px; animation: fx-cover var(--cycle) cubic-bezier(0.45, 0, 0.25, 1) var(--cycle-delay) infinite both; }
.fx-story .fx-label { animation: fx-label var(--cycle) linear var(--cycle-delay) infinite both; }
@keyframes fx-pencil {
  0% { transform: translate(843.0px,1136.0px) rotate(-8deg) scale(1); }
  7% { transform: translate(843.0px,1136.0px) rotate(-8deg) scale(1); }
  10% { transform: translate(400.9px,909.3px) rotate(48deg) scale(0.58); }
  10.459% { transform: translate(413.1px,899.6px) rotate(48deg) scale(0.58); }
  10.919% { transform: translate(405.6px,895.7px) rotate(48deg) scale(0.58); }
  11.378% { transform: translate(417.5px,904.3px) rotate(48deg) scale(0.58); }
  11.838% { transform: translate(432.3px,898.8px) rotate(48deg) scale(0.58); }
  12.297% { transform: translate(431.7px,886.2px) rotate(48deg) scale(0.58); }
  12.757% { transform: translate(434.3px,897.5px) rotate(48deg) scale(0.58); }
  13.216% { transform: translate(450.0px,896.5px) rotate(48deg) scale(0.58); }
  13.676% { transform: translate(458.4px,884.0px) rotate(48deg) scale(0.58); }
  14.135% { transform: translate(452.0px,888.5px) rotate(48deg) scale(0.58); }
  14.595% { transform: translate(466.9px,892.7px) rotate(48deg) scale(0.58); }
  15.054% { transform: translate(479.9px,884.1px) rotate(48deg) scale(0.58); }
  15.514% { transform: translate(473.3px,877.5px) rotate(48deg) scale(0.58); }
  15.973% { transform: translate(483.6px,887.3px) rotate(48deg) scale(0.58); }
  16.432% { transform: translate(498.7px,883.0px) rotate(48deg) scale(0.58); }
  16.892% { transform: translate(500.6px,869.6px) rotate(48deg) scale(0.58); }
  17.351% { transform: translate(500.4px,880.1px) rotate(48deg) scale(0.58); }
  17.811% { transform: translate(516.1px,880.3px) rotate(48deg) scale(0.58); }
  18.27% { transform: translate(526.1px,868.7px) rotate(48deg) scale(0.58); }
  18.73% { transform: translate(518.7px,870.5px) rotate(48deg) scale(0.58); }
  19.189% { transform: translate(532.9px,876.1px) rotate(48deg) scale(0.58); }
  19.649% { transform: translate(546.7px,868.5px) rotate(48deg) scale(0.58); }
  20.108% { transform: translate(541.6px,859.4px) rotate(48deg) scale(0.58); }
  20.568% { transform: translate(549.6px,870.3px) rotate(48deg) scale(0.58); }
  21.027% { transform: translate(565.0px,867.0px) rotate(48deg) scale(0.58); }
  21.486% { transform: translate(569.4px,853.5px) rotate(48deg) scale(0.58); }
  21.946% { transform: translate(566.7px,862.5px) rotate(48deg) scale(0.58); }
  22.405% { transform: translate(582.2px,864.0px) rotate(48deg) scale(0.58); }
  22.865% { transform: translate(593.4px,853.3px) rotate(48deg) scale(0.58); }
  23.324% { transform: translate(585.7px,852.3px) rotate(48deg) scale(0.58); }
  23.784% { transform: translate(599.0px,859.4px) rotate(48deg) scale(0.58); }
  24.243% { transform: translate(613.3px,852.9px) rotate(48deg) scale(0.58); }
  24.703% { transform: translate(610.3px,841.7px) rotate(48deg) scale(0.58); }
  25.162% { transform: translate(615.6px,853.1px) rotate(48deg) scale(0.58); }
  25.622% { transform: translate(631.2px,851.0px) rotate(48deg) scale(0.58); }
  26.081% { transform: translate(637.8px,837.8px) rotate(48deg) scale(0.58); }
  26.541% { transform: translate(633.0px,844.7px) rotate(48deg) scale(0.58); }
  27% { transform: translate(648.3px,847.6px) rotate(48deg) scale(0.58); }
  28.5% { transform: translate(415.4px,967.5px) rotate(48deg) scale(0.58); }
  28.963% { transform: translate(427.8px,957.9px) rotate(48deg) scale(0.58); }
  29.426% { transform: translate(420.8px,953.8px) rotate(48deg) scale(0.58); }
  29.889% { transform: translate(433.0px,962.2px) rotate(48deg) scale(0.58); }
  30.352% { transform: translate(447.9px,956.9px) rotate(48deg) scale(0.58); }
  30.815% { transform: translate(448.2px,944.0px) rotate(48deg) scale(0.58); }
  31.278% { transform: translate(450.7px,955.1px) rotate(48deg) scale(0.58); }
  31.741% { transform: translate(466.5px,954.3px) rotate(48deg) scale(0.58); }
  32.204% { transform: translate(475.7px,942.2px) rotate(48deg) scale(0.58); }
  32.667% { transform: translate(469.5px,945.7px) rotate(48deg) scale(0.58); }
  33.13% { transform: translate(484.4px,950.2px) rotate(48deg) scale(0.58); }
  33.593% { transform: translate(497.8px,942.0px) rotate(48deg) scale(0.58); }
  34.056% { transform: translate(492.2px,934.1px) rotate(48deg) scale(0.58); }
  34.519% { transform: translate(502.0px,944.3px) rotate(48deg) scale(0.58); }
  34.981% { transform: translate(517.3px,940.5px) rotate(48deg) scale(0.58); }
  35.444% { transform: translate(521.1px,927.0px) rotate(48deg) scale(0.58); }
  35.907% { transform: translate(519.9px,936.5px) rotate(48deg) scale(0.58); }
  36.37% { transform: translate(535.6px,937.4px) rotate(48deg) scale(0.58); }
  36.833% { transform: translate(546.6px,926.5px) rotate(48deg) scale(0.58); }
  37.296% { transform: translate(539.5px,926.3px) rotate(48deg) scale(0.58); }
  37.759% { transform: translate(553.3px,932.7px) rotate(48deg) scale(0.58); }
  38.222% { transform: translate(567.6px,926.0px) rotate(48deg) scale(0.58); }
  38.685% { transform: translate(564.6px,915.0px) rotate(48deg) scale(0.58); }
  39.148% { transform: translate(570.9px,926.3px) rotate(48deg) scale(0.58); }
  39.611% { transform: translate(586.6px,923.9px) rotate(48deg) scale(0.58); }
  40.074% { transform: translate(593.4px,910.8px) rotate(48deg) scale(0.58); }
  40.537% { transform: translate(589.2px,917.7px) rotate(48deg) scale(0.58); }
  41% { transform: translate(604.6px,920.3px) rotate(48deg) scale(0.58); }
  42.5% { transform: translate(431.1px,1030.6px) rotate(48deg) scale(0.58); }
  43.25% { transform: translate(444.1px,1029.1px) rotate(48deg) scale(0.58); }
  44% { transform: translate(457.0px,1027.0px) rotate(48deg) scale(0.58); }
  44.75% { transform: translate(469.7px,1023.9px) rotate(48deg) scale(0.58); }
  45.5% { transform: translate(482.0px,1019.7px) rotate(48deg) scale(0.58); }
  46.25% { transform: translate(494.2px,1014.8px) rotate(48deg) scale(0.58); }
  47% { transform: translate(506.3px,1010.0px) rotate(48deg) scale(0.58); }
  47.75% { transform: translate(518.7px,1005.8px) rotate(48deg) scale(0.58); }
  48.5% { transform: translate(531.4px,1002.6px) rotate(48deg) scale(0.58); }
  49.25% { transform: translate(544.3px,1000.5px) rotate(48deg) scale(0.58); }
  50% { transform: translate(557.3px,999.1px) rotate(48deg) scale(0.58); }
  52% { transform: translate(557.3px,999.1px) rotate(48deg) scale(0.58); }
  60% { transform: translate(843.0px,1136.0px) rotate(-8deg) scale(1); }
  100% { transform: translate(843.0px,1136.0px) rotate(-8deg) scale(1); }
}
.fx-pencil { transform: translate(843.0px,1136.0px) rotate(-8deg) scale(1); }
.fx-story .fx-pencil { animation: fx-pencil var(--cycle) linear var(--cycle-delay) infinite both; }
@keyframes fx-stroke0 {
  0%,9.98% { stroke-dashoffset: 598; opacity: 0; }
  9.99% { stroke-dashoffset: 598; opacity: 1; }
  27%,70% { stroke-dashoffset: 0; opacity: 1; }
  70.5%,100% { stroke-dashoffset: 598; opacity: 0; }
}
.fx-story .fx-stroke0 { stroke-dasharray: 598; animation: fx-stroke0 var(--cycle) linear var(--cycle-delay) infinite both; }
@keyframes fx-stroke1 {
  0%,28.48% { stroke-dashoffset: 437; opacity: 0; }
  28.49% { stroke-dashoffset: 437; opacity: 1; }
  41%,70% { stroke-dashoffset: 0; opacity: 1; }
  70.5%,100% { stroke-dashoffset: 437; opacity: 0; }
}
.fx-story .fx-stroke1 { stroke-dasharray: 437; animation: fx-stroke1 var(--cycle) linear var(--cycle-delay) infinite both; }
@keyframes fx-stroke2 {
  0%,42.48% { stroke-dashoffset: 131; opacity: 0; }
  42.49% { stroke-dashoffset: 131; opacity: 1; }
  50%,70% { stroke-dashoffset: 0; opacity: 1; }
  70.5%,100% { stroke-dashoffset: 131; opacity: 0; }
}
.fx-story .fx-stroke2 { stroke-dasharray: 131; animation: fx-stroke2 var(--cycle) linear var(--cycle-delay) infinite both; }

.fx-wipe { fill: none; stroke: #fff; stroke-linecap: butt; }
.fx-stroke { fill: none; stroke: var(--blue); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) {
  .fx-float, .fx-story .fx-in, .fx-story .fx-shift, .fx-story .fx-cover, .fx-story .fx-label, .fx-story .fx-pencil, .fx-story [class*="fx-stroke"] { animation: none !important; }
  .hero__badge .fx-word { animation: none; opacity: 1; }
  .fx-story .fx-wipe { stroke-dasharray: none; opacity: 1; }
}