/* ==========================================================================
   AGRIYANA — Micro-interactions

   Small responses that carry meaning. The test each one has to pass: if you
   removed it, would anything be harder to understand or less pleasant to use?
   Anything that only answered "it would look less busy" is not in here.

     1  Word reveal      headings arrive a word at a time
     2  Card tilt        cards lean toward the pointer
     3  Media wipe       photographs are uncovered, not faded
     4  Digit roll       a price that changes rolls to the new number
     5  Icon nudges      icons move in the direction they point
     6  Field focus      inputs answer the caret

   Loads after atmosphere.css.
   ========================================================================== */

/* ==================================================================== 1. word reveal

   A heading that fades in as one block tells you nothing. One that arrives a
   word at a time follows the way it is read. motion.js splits the text; each
   word is clipped and rises from its own baseline.

   Only on headings — doing this to body copy would be unreadable, and doing it
   to a price would make the number look uncertain. */
.w-line { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.w-line > span { display: inline-block; }

html.m-ready [data-words] .w-line > span {
  transform: translate3d(0, 108%, 0);
  transition: transform var(--dur-3) var(--ease-soil);
  transition-delay: var(--wd, 0ms);
}
html.m-ready [data-words].is-in .w-line > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.m-ready [data-words] .w-line > span { transform: none; transition: none; }
}

/* ==================================================================== 2. card tilt

   The card leans a couple of degrees toward the pointer. Two degrees, not ten:
   at ten it becomes a toy and the text starts to distort. What it buys is the
   sense that the card is a physical thing sitting on the page rather than a
   rectangle printed on it, which is what makes the lift on hover land.

   motion.js writes --tx/--ty; the transform lives here so the JS only ever
   touches a custom property and never triggers layout. */
.pcard,
.spec-card,
.cat-card {
  transform:
    perspective(900px)
    rotateX(var(--ty, 0deg))
    rotateY(var(--tx, 0deg))
    translateY(var(--lift, 0px));
  transform-style: preserve-3d;
}
.pcard:hover,
.spec-card:hover { --lift: -3px; }
.cat-card:hover  { --lift: -5px; }

/* the media inside pushes slightly forward, so the card has depth rather than
   being a flat plane that happens to be rotated */
.pcard-media,
.spec-card-media { transform: translateZ(var(--pop, 0px)); transition: transform var(--dur-2) var(--ease-out); }
.pcard:hover .pcard-media,
.spec-card:hover .spec-card-media { --pop: 14px; }

@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .pcard, .spec-card, .cat-card { transform: translateY(var(--lift, 0px)); }
  .pcard-media, .spec-card-media { transform: none; }
}

/* ==================================================================== 3. media wipe

   Photographs are uncovered rather than faded in. A fade says "this was always
   here, you just could not see it"; a wipe says "this is arriving". It is the
   more honest description of what is happening, and it reads as deliberate.

   The scale on the image counteracts the wipe so the picture is not also
   sliding — only the mask moves. */
html.m-ready [data-wipe] {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-4) var(--ease-soil);
  transition-delay: var(--rise-d, 0ms);
}
html.m-ready [data-wipe].is-in { clip-path: inset(0 0 0 0); }

html.m-ready [data-wipe] img {
  transform: scale(1.08);
  transition: transform 1400ms var(--ease-soil);
  transition-delay: var(--rise-d, 0ms);
}
html.m-ready [data-wipe].is-in img { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  html.m-ready [data-wipe] { clip-path: none; }
  html.m-ready [data-wipe] img { transform: none; }
}

/* ==================================================================== 4. digit roll

   When a variant changes the price from ₹26,500 to ₹28,500, swapping the text
   makes it look like a rendering glitch. Rolling it makes it look like a
   consequence of the thing you just clicked. Short, because a price that takes
   a second to settle reads as untrustworthy. */
.price-now { display: inline-block; }
.price-now.is-rolling {
  animation: digit-roll 380ms var(--ease-soil);
}
@keyframes digit-roll {
  0%   { transform: translateY(0);     opacity: 1; }
  42%  { transform: translateY(-70%);  opacity: 0; }
  43%  { transform: translateY(70%);   opacity: 0; }
  100% { transform: translateY(0);     opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .price-now.is-rolling { animation: none; } }

/* ==================================================================== 5. icon nudges

   An icon moves in the direction it points. An arrow goes right, a chevron
   goes down, a basket lifts. It is a very small thing but it makes the icon
   part of the answer rather than a decoration next to it. */
.btn .ico,
.see-all .ico,
.cline-link .ico { transition: transform var(--dur-2) var(--ease-spring); }

.btn:hover  .ico[href*='arrow'],
.see-all:hover .ico { transform: translateX(4px); }
.btn:hover  .ico[href*='chevron-down'] { transform: translateY(3px); }
.btn:hover  .ico[href*='cart'],
.btn:hover  .ico[href*='basket'] { transform: translateY(-2px) scale(1.06); }
.btn:hover  .ico[href*='whatsapp'] { transform: scale(1.12) rotate(-6deg); }
.btn:hover  .ico[href*='lock'] { transform: scale(1.1); }

/* svg <use> does not expose href to the attribute selector reliably, so the
   common cases are also covered by position */
.btn-accent:hover .ico:first-child,
.btn-brand:hover .ico:first-child { transform: scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  .btn .ico, .see-all .ico, .cline-link .ico { transition: none; }
}

/* ==================================================================== 6. field focus

   The label lifts and colours, and the field's own border thickens from the
   bottom edge. It answers the caret rather than just drawing a ring around
   everything. */
.field-label { transition: color var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-spring); transform-origin: left center; }
.field:focus-within .field-label { color: var(--brand-ink); transform: translateX(2px); }

.input, .select, .textarea { transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-1) var(--ease-out); }

/* ==================================================================== 7. section rules

   The numbered chip on a section head fills as the section arrives, so the
   number reads as a step being reached rather than a label sitting there. */
.sec-num::before { transition: background-color var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out); }
[data-rise].is-in .sec-num::before,
.sec-head.is-in .sec-num::before { background: var(--accent); color: var(--accent-fg); }
.on-band [data-rise].is-in .sec-num::before,
.on-band .sec-head.is-in .sec-num::before { background: var(--band-accent); color: #1A0D02; }