/* ==========================================================
   Sri Parvathi Rolling — Responsive & accessibility
   Phone/tablet layout (max-width: 900px), scroll effects, reduced-motion.
   ========================================================== */

@supports (animation-timeline: view()) {
  .reveal{animation:revealUp linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
  .step::before{animation:grow linear both;animation-timeline:view();animation-range:entry 10% cover 35%}
  .progress{display:block;position:fixed;top:0;left:0;right:0;height:3px;z-index:50;background:linear-gradient(90deg,#8A6A2E,#F6E7BD,#C1A064);transform-origin:left;animation:grow linear both;animation-timeline:scroll(root)}
}
@media (prefers-reduced-motion: reduce) {
  .halo,.swatch{animation:none !important}
}
@media (max-width: 900px) {
  .halo{width:280px;height:280px}
  .spark{width:10px;height:10px}
}
@media (prefers-reduced-motion: reduce) {
  .gold-text,.spark,.halo,.btn::after,.pulse,.card-img svg,.gem,.reveal,.step::before,.progress{animation:none !important;opacity:1;transform:none}
}
@media (max-width: 900px) {
  .cast-grid{grid-template-columns:minmax(0,1fr) !important;grid-template-rows:none !important;grid-auto-rows:240px}
  .cast-grid > *{grid-column:auto !important;grid-row:auto !important}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:28px !important}
  .casting{padding:64px 20px !important}
}
@media (prefers-reduced-motion: reduce) {
  .molten,.molten-text,.casting::after{animation:none !important}
}
@media (prefers-reduced-motion: reduce) {
  .crucible,.melt,.pour,.mold-fill,.sparks circle{animation:none !important}
  .pour,.sparks{opacity:0}
  .mold-fill{fill:#C9CED3}
}
@media (max-width: 900px) {
  .slide-cap{font-size:10px !important}
}
@media (prefers-reduced-motion: reduce) {
  .slides,.roller-top,.roller-bot,.coil,.slab-move,.sheet-move,.furnace-glow,.shine-line,.dot{animation:none !important}
}
@media (max-width: 900px) {
  .hdr{height:auto !important;flex-wrap:wrap;padding:16px 20px !important;row-gap:14px}
  .nav{order:3;width:100%;gap:22px !important;font-size:12px !important;overflow-x:auto;white-space:nowrap;padding-bottom:4px}
  .nav a{padding:10px 0}
  .hcta{height:44px !important;padding:0 16px !important;font-size:11px !important}
  .hero{height:auto !important;flex-direction:column-reverse !important}
  .hero-text{width:auto !important;padding:40px 20px 56px !important;gap:22px !important}
  .h1{font-size:52px !important}
  .btns{flex-direction:column;margin-top:4px !important}
  .btns a{justify-content:center}
  .hero-art{padding:32px 16px 40px;gap:4px !important}
  .art-svg{width:100%;max-width:300px;height:auto}
  .brand-xl{font-size:30px !important;letter-spacing:0.03em !important}
  .hdr > a:first-child .serif{font-size:19px !important}
  .hdr > a:first-child svg{width:26px;height:26px}
  .hdr > a:first-child{gap:8px !important}
  .hdr > a:first-child span:last-child{font-size:9px !important;letter-spacing:0.2em !important}
  .hcta{padding:0 12px !important;font-size:10px !important;letter-spacing:0.08em !important}
  .sec{padding:64px 20px !important;gap:40px !important}
  .sec-head{flex-direction:column;align-items:flex-start !important;gap:16px}
  .h2{font-size:40px !important}
  .grid3{grid-template-columns:minmax(0,1fr) !important;gap:40px !important}
  .card-img{height:260px !important}
  .about{height:auto !important;flex-direction:column}
  .about-img{width:auto !important;height:240px;padding:24px 20px !important}
  .about-text{padding:56px 20px !important}
  .contact{flex-direction:column;gap:48px !important}
  .contact-left{width:auto !important}
  .form{grid-template-columns:minmax(0,1fr) !important}
  .form > *{grid-column:auto !important}
  .form button{justify-self:stretch !important}
  .ftr{flex-direction:column;gap:32px;padding:48px 20px !important}
  .ftr > span:last-child{text-align:left !important}
}
@media (prefers-reduced-motion: reduce) {
  .rise,.sweep,.ring,.ring2,.float,.draw path,.draw ellipse,.chrome,.ticker,.bob,.lid,.rock,.tilt,.swing{animation:none;opacity:1;stroke-dashoffset:0}
  .steam path{animation:none;opacity:.6}
}