Cine Del Mar<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,400;1,700&family=Inter:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n<style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n html, body { width: 100%; height: 100%; overflow-x: hidden; background: #0a1f3d; }\n\n #hero {\n position: relative;\n width: 100%;\n height: 100svh;\n min-height: 600px;\n overflow: hidden;\n cursor: none;\n font-family: 'Inter', sans-serif;\n -webkit-font-smoothing: antialiased;\n }\n\n #main-canvas {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n display: block;\n }\n\n \/* Content overlay *\/\n #content {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 20px 24px 140px;\n z-index: 20;\n pointer-events: none;\n }\n\n .eyebrow {\n font-size: 11px;\n font-weight: 600;\n letter-spacing: 0.28em;\n text-transform: uppercase;\n color: rgba(247,201,72,0.95);\n margin-bottom: 16px;\n text-shadow: 0 2px 12px rgba(0,0,0,0.6);\n animation: fadeUp 1s ease 0.3s both;\n }\n\n .title {\n font-family: 'Playfair Display', serif;\n font-style: italic;\n font-weight: 900;\n font-size: clamp(54px, 12vw, 110px);\n line-height: 0.88;\n color: #fff;\n text-shadow: 0 4px 40px rgba(0,0,0,0.5), 0 0 80px rgba(247,201,72,0.1);\n animation: fadeUp 1s ease 0.5s both;\n letter-spacing: -0.02em;\n }\n .title .mar { color: #F7C948; display: block; }\n\n .rule {\n width: 50px; height: 1.5px;\n background: rgba(247,201,72,0.5);\n margin: 22px auto;\n animation: fadeUp 1s ease 0.7s both;\n }\n\n .tagline {\n font-family: 'Playfair Display', serif;\n font-style: italic;\n font-size: clamp(14px, 2.2vw, 19px);\n color: rgba(240,249,255,0.9);\n max-width: 460px;\n line-height: 1.6;\n text-shadow: 0 2px 16px rgba(0,0,0,0.7);\n margin-bottom: 36px;\n animation: fadeUp 1s ease 0.8s both;\n }\n\n .cta {\n pointer-events: all;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: #FF6B35;\n color: #fff;\n font-family: 'Inter', sans-serif;\n font-weight: 600;\n font-size: 15px;\n letter-spacing: 0.04em;\n padding: 15px 34px;\n border-radius: 50px;\n text-decoration: none;\n border: none;\n cursor: none;\n box-shadow: 0 8px 32px rgba(255,107,53,0.5);\n transition: transform 0.2s, box-shadow 0.2s;\n animation: fadeUp 1s ease 1s both;\n }\n .cta:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 44px rgba(255,107,53,0.6); }\n\n \/* Custom cursor *\/\n #cursor {\n position: fixed;\n width: 18px; height: 18px;\n border-radius: 50%;\n background: rgba(247,201,72,0.9);\n box-shadow: 0 0 18px rgba(247,201,72,0.7), 0 0 50px rgba(247,201,72,0.25);\n pointer-events: none;\n transform: translate(-50%, -50%);\n z-index: 9999;\n mix-blend-mode: screen;\n transition: width 0.2s, height 0.2s, background 0.2s;\n }\n #cursor.big {\n width: 36px; height: 36px;\n background: rgba(255,107,53,0.9);\n }\n\n \/* Sparkle container *\/\n #sparks { position: absolute; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }\n\n .spark {\n position: absolute;\n border-radius: 50%;\n pointer-events: none;\n animation: sparkFly var(--dur) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;\n }\n @keyframes sparkFly {\n 0% { opacity: 1; transform: translate(0,0) scale(1) rotate(0deg); }\n 100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.1) rotate(var(--rot)); }\n }\n\n .spark-star {\n position: absolute;\n pointer-events: none;\n animation: starFly var(--dur) ease-out forwards;\n font-size: var(--sz);\n line-height: 1;\n }\n @keyframes starFly {\n 0% { opacity: 1; transform: translate(0,0) scale(1); }\n 60% { opacity: 1; }\n 100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.3); }\n }\n\n \/* Scroll hint *\/\n #scroll-hint {\n position: absolute;\n bottom: 28px; left: 50%;\n transform: translateX(-50%);\n z-index: 20;\n display: flex; flex-direction: column; align-items: center; gap: 6px;\n color: rgba(240,249,255,0.5);\n font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;\n animation: fadeUp 1s ease 1.4s both;\n }\n .scroll-line {\n width: 1px; height: 36px;\n background: linear-gradient(to bottom, rgba(247,201,72,0.6), transparent);\n animation: scrollAnim 2s ease-in-out infinite;\n }\n @keyframes scrollAnim {\n 0%,100%{ transform: scaleY(1); transform-origin:top; }\n 50% { transform: scaleY(0.3); transform-origin:top; }\n }\n\n @keyframes fadeUp {\n from { opacity:0; transform: translateY(20px); }\n to { opacity:1; transform: translateY(0); }\n }\n\n @media (hover:none) { #hero { cursor: auto; } #cursor { display:none; } }\n @media (max-width:480px) { #content { padding-bottom: 110px; } }\n @media (prefers-reduced-motion:reduce) {\n .eyebrow,.title,.rule,.tagline,.cta,#scroll-hint { animation:none; opacity:1; transform:none; }\n }\n<\/style>\n<\/head>\n<body>\n<div id=\"hero\">\n <canvas id=\"main-canvas\"><\/canvas>\n <div id=\"sparks\"><\/div>\n\n <div id=\"content\">\n <p class=\"eyebrow\">\ud83c\udf0a Outdoor Cinema \u00b7 Cornwall<\/p>\n <h1 class=\"title\">Cine<span class=\"mar\">Del Mar<\/span><\/h1>\n <div class=\"rule\"><\/div>\n <p class=\"tagline\">Immersive open-air cinema across Cornwall's most spectacular coastal venues. Great films, real atmosphere, under the stars.<\/p>\n <a href=\"#events\" class=\"cta\">\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"\/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"\/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/><\/svg>\n See What's On\n <\/a>\n <\/div>\n\n <div id=\"scroll-hint\">\n <div class=\"scroll-line\"><\/div>\n scroll\n <\/div>\n<\/div>\n\n<div id=\"cursor\"><\/div>\n\n<script>\n(function(){\n const hero = document.getElementById('hero');\n const canvas = document.getElementById('main-canvas');\n const ctx = canvas.getContext('2d');\n const sparks = document.getElementById('sparks');\n const cursor = document.getElementById('cursor');\n const cta = document.querySelector('.cta');\n\n let W, H;\n let mouseX = 0.55, mouseY = 0.35;\n let smX = 0.55, smY = 0.35;\n let isTouch = window.matchMedia('(hover:none)').matches;\n let autoT = 0;\n let t = 0;\n\n function resize() {\n W = canvas.width = hero.offsetWidth;\n H = canvas.height = hero.offsetHeight;\n }\n resize();\n window.addEventListener('resize', resize);\n\n \/* \u2500\u2500\u2500 HELPERS \u2500\u2500\u2500 *\/\n const lerp = (a,b,t) => a+(b-a)*t;\n const clamp = (v,lo,hi) => Math.max(lo,Math.min(hi,v));\n\n \/* \u2500\u2500\u2500 SEAGULLS \u2500\u2500\u2500 *\/\n class Gull {\n constructor(startRight) {\n this.reset(startRight, true);\n }\n reset(fromRight, init) {\n this.fromRight = fromRight;\n this.x = fromRight ? W + 80 : -80;\n this.y = H * (0.08 + Math.random() * 0.32);\n this.baseY = this.y;\n this.speed = 0.6 + Math.random() * 0.9;\n this.wingT = Math.random() * Math.PI * 2;\n this.wingSpeed = 0.06 + Math.random() * 0.04;\n this.scale = 0.5 + Math.random() * 0.7;\n this.bobAmp = 6 + Math.random() * 8;\n this.bobFreq = 0.3 + Math.random() * 0.3;\n if (init) {\n \/\/ scatter starting positions\n this.x = fromRight\n ? W * (0.5 + Math.random() * 0.8)\n : W * (-0.3 + Math.random() * 0.5);\n }\n }\n update() {\n this.x += this.fromRight ? -this.speed : this.speed;\n this.wingT += this.wingSpeed;\n this.y = this.baseY + Math.sin(this.wingT * this.bobFreq * 6) * this.bobAmp;\n \/\/ gone off screen\n if (this.fromRight && this.x < -120) this.reset(Math.random()>0.5, false);\n if (!this.fromRight && this.x > W+120) this.reset(Math.random()>0.5, false);\n }\n draw(ctx) {\n const flap = Math.sin(this.wingT);\n const s = this.scale;\n const facing = this.fromRight ? -1 : 1; \/\/ -1 = facing left\n\n ctx.save();\n ctx.translate(this.x, this.y);\n ctx.scale(facing * s, s);\n\n \/\/ Body\n ctx.fillStyle = 'rgba(255,255,255,0.92)';\n ctx.beginPath();\n ctx.ellipse(0, 0, 14, 5, 0, 0, Math.PI*2);\n ctx.fill();\n\n \/\/ Head\n ctx.beginPath();\n ctx.ellipse(14, -3, 6, 5, -0.3, 0, Math.PI*2);\n ctx.fill();\n\n \/\/ Beak\n ctx.fillStyle = 'rgba(255,190,80,0.95)';\n ctx.beginPath();\n ctx.moveTo(19, -2);\n ctx.lineTo(26, -1);\n ctx.lineTo(19, 1);\n ctx.closePath();\n ctx.fill();\n\n \/\/ Eye\n ctx.fillStyle = '#333';\n ctx.beginPath();\n ctx.arc(16, -4, 1.5, 0, Math.PI*2);\n ctx.fill();\n\n \/\/ Left wing (top)\n const wUp = flap * 18;\n ctx.fillStyle = 'rgba(245,245,245,0.95)';\n ctx.beginPath();\n ctx.moveTo(-2, -2);\n ctx.quadraticCurveTo(-16, -8 - wUp, -34, -6 - wUp * 0.5);\n ctx.quadraticCurveTo(-20, 0, -2, 4);\n ctx.closePath();\n ctx.fill();\n \/\/ Wing tip detail\n ctx.strokeStyle = 'rgba(180,180,180,0.5)';\n ctx.lineWidth = 0.8;\n ctx.beginPath();\n ctx.moveTo(-30, -5 - wUp*0.4);\n ctx.lineTo(-34, -6 - wUp*0.5);\n ctx.stroke();\n\n \/\/ Right wing (bottom, mirrored slightly)\n const wDn = flap * 14;\n ctx.fillStyle = 'rgba(230,230,230,0.9)';\n ctx.beginPath();\n ctx.moveTo(-2, 2);\n ctx.quadraticCurveTo(-14, 6 + wDn, -30, 8 + wDn*0.5);\n ctx.quadraticCurveTo(-18, 2, -2, -1);\n ctx.closePath();\n ctx.fill();\n\n \/\/ Tail\n ctx.fillStyle = 'rgba(240,240,240,0.9)';\n ctx.beginPath();\n ctx.moveTo(-12, 0);\n ctx.lineTo(-22, -4);\n ctx.lineTo(-24, 4);\n ctx.closePath();\n ctx.fill();\n\n ctx.restore();\n }\n }\n\n const gulls = [\n new Gull(false), new Gull(true), new Gull(false),\n new Gull(true), new Gull(false)\n ];\n\n \/* \u2500\u2500\u2500 OUTDOOR CINEMA SCENE \u2500\u2500\u2500 *\/\n \/\/ Positioned on right side of cliff terrace\n let cinemaIntro = 0; \/\/ 0\u21921 over time, drives animation in\n\n function drawScene(time) {\n cinemaIntro = clamp(cinemaIntro + 0.008, 0, 1);\n const ci = easeOutBack(cinemaIntro);\n\n \/\/ \u2500\u2500 SKY \u2500\u2500\n const warmth = smX;\n const skyTop = ctx.createLinearGradient(0, 0, 0, H * 0.62);\n skyTop.addColorStop(0, `rgb(${lerp(30,100,warmth)},${lerp(80,110,warmth)},${lerp(160,140,warmth)})`);\n skyTop.addColorStop(0.5, `rgb(${lerp(180,255,warmth)},${lerp(160,140,warmth)},${lerp(200,80,warmth)})`);\n skyTop.addColorStop(1, `rgb(${lerp(220,255,warmth)},${lerp(180,150,warmth)},${lerp(160,80,warmth)})`);\n ctx.fillStyle = skyTop;\n ctx.fillRect(0, 0, W, H);\n\n \/\/ \u2500\u2500 SUN \u2500\u2500\n const sunX = W * (0.12 + smX * 0.65);\n const sunY = H * (0.06 + (1-smY) * 0.3);\n drawSun(sunX, sunY, warmth, time);\n\n \/\/ \u2500\u2500 DISTANT CLIFFS (parallax layers) \u2500\u2500\n drawCliffs(warmth);\n\n \/\/ \u2500\u2500 SEA \u2500\u2500\n drawSea(time, warmth, sunX);\n\n \/\/ \u2500\u2500 FOREGROUND CLIFF \/ TERRACE \u2500\u2500\n drawTerrace(warmth);\n\n \/\/ \u2500\u2500 OUTDOOR CINEMA \u2500\u2500\n drawCinema(time, ci, warmth, sunX, sunY);\n\n \/\/ \u2500\u2500 SEAGULLS \u2500\u2500\n gulls.forEach(g => { g.update(); g.draw(ctx); });\n\n \/\/ \u2500\u2500 VIGNETTE \u2500\u2500\n const vig = ctx.createRadialGradient(W\/2, H\/2, H*0.2, W\/2, H\/2, H*0.85);\n vig.addColorStop(0, 'rgba(0,0,0,0)');\n vig.addColorStop(1, 'rgba(0,0,0,0.45)');\n ctx.fillStyle = vig;\n ctx.fillRect(0,0,W,H);\n }\n\n function drawSun(sx, sy, warmth, time) {\n \/\/ Outer atmospheric glow\n const ag = ctx.createRadialGradient(sx,sy,0,sx,sy,200);\n ag.addColorStop(0, `rgba(255,${lerp(220,160,warmth)},${lerp(100,20,warmth)},0.35)`);\n ag.addColorStop(0.4, `rgba(255,${lerp(200,140,warmth)},${lerp(80,10,warmth)},0.1)`);\n ag.addColorStop(1, 'rgba(255,160,40,0)');\n ctx.fillStyle = ag;\n ctx.beginPath(); ctx.arc(sx,sy,200,0,Math.PI*2); ctx.fill();\n\n \/\/ Sun disc\n const sd = ctx.createRadialGradient(sx-4,sy-4,0,sx,sy,36);\n sd.addColorStop(0, '#fff9e0');\n sd.addColorStop(0.4, `rgb(255,${lerp(230,175,warmth)},${lerp(80,30,warmth)})`);\n sd.addColorStop(1, `rgb(255,${lerp(180,120,warmth)},0)`);\n ctx.fillStyle = sd;\n ctx.beginPath(); ctx.arc(sx,sy,36,0,Math.PI*2); ctx.fill();\n\n \/\/ Rays\n ctx.save();\n ctx.translate(sx,sy);\n ctx.globalAlpha = 0.07 + 0.03*Math.sin(time*0.4);\n for (let i=0;i<16;i++) {\n const ang = (i\/16)*Math.PI*2 + time*0.04;\n const len = 70 + 25*Math.sin(time*0.7+i);\n ctx.strokeStyle = '#fff5c0';\n ctx.lineWidth = 1.2;\n ctx.beginPath();\n ctx.moveTo(Math.cos(ang)*38, Math.sin(ang)*38);\n ctx.lineTo(Math.cos(ang)*(38+len), Math.sin(ang)*(38+len));\n ctx.stroke();\n }\n ctx.restore(); ctx.globalAlpha = 1;\n }\n\n function drawCliffs(warmth) {\n \/\/ Far headland \u2014 hazy, bluish\n const h1col = `rgba(${lerp(60,100,warmth)},${lerp(90,110,warmth)},${lerp(130,120,warmth)},0.55)`;\n ctx.fillStyle = h1col;\n ctx.beginPath();\n ctx.moveTo(0, H*0.58);\n ctx.lineTo(0, H*0.72);\n ctx.bezierCurveTo(W*0.05,H*0.65, W*0.12,H*0.60, W*0.22,H*0.58);\n ctx.bezierCurveTo(W*0.30,H*0.56, W*0.38,H*0.60, W*0.50,H*0.62);\n ctx.lineTo(W*0.50, H*0.75);\n ctx.lineTo(0, H*0.75);\n ctx.closePath();\n ctx.fill();\n\n \/\/ Mid headland (right side)\n const h2col = `rgba(${lerp(45,85,warmth)},${lerp(75,95,warmth)},${lerp(110,100,warmth)},0.7)`;\n ctx.fillStyle = h2col;\n ctx.beginPath();\n ctx.moveTo(W*0.72, H*0.75);\n ctx.lineTo(W*0.72, H*0.60);\n ctx.bezierCurveTo(W*0.78,H*0.55, W*0.86,H*0.54, W*0.92,H*0.56);\n ctx.bezierCurveTo(W*0.96,H*0.57, W,H*0.59, W,H*0.62);\n ctx.lineTo(W, H*0.75);\n ctx.closePath();\n ctx.fill();\n }\n\n function drawSea(time, warmth, sunX) {\n const seaTop = H * 0.60;\n const seaBot = H * 0.78;\n\n \/\/ Sea base gradient\n const sg = ctx.createLinearGradient(0, seaTop, 0, seaBot);\n sg.addColorStop(0, `rgb(${lerp(20,55,warmth)},${lerp(90,110,warmth)},${lerp(145,155,warmth)})`);\n sg.addColorStop(1, `rgb(${lerp(8,30,warmth)},${lerp(55,75,warmth)},${lerp(105,115,warmth)})`);\n ctx.fillStyle = sg;\n ctx.fillRect(0, seaTop, W, seaBot - seaTop);\n\n \/\/ Sun reflection\n const refW = 60 + smX*50;\n const rg = ctx.createLinearGradient(0, seaTop, 0, seaBot);\n rg.addColorStop(0, `rgba(255,${lerp(200,150,warmth)},${lerp(80,20,warmth)},${lerp(0.3,0.5,warmth)})`);\n rg.addColorStop(1, 'rgba(255,160,30,0)');\n ctx.save();\n ctx.fillStyle = rg;\n ctx.beginPath();\n const colCenterX = sunX;\n for (let i=0;i<=20;i++) {\n const fy = seaTop + (i\/20)*(seaBot-seaTop);\n const wob = Math.sin(fy*0.08+time*1.8)*7;\n const hw = refW\/2 + (i\/20)*refW*0.7;\n if(i===0) ctx.moveTo(colCenterX+wob-hw, fy);\n else ctx.lineTo(colCenterX+wob-hw, fy);\n }\n for (let i=20;i>=0;i--) {\n const fy = seaTop + (i\/20)*(seaBot-seaTop);\n const wob = Math.sin(fy*0.08+time*1.8)*7;\n const hw = refW\/2 + (i\/20)*refW*0.7;\n ctx.lineTo(colCenterX+wob+hw, fy);\n }\n ctx.closePath(); ctx.fill(); ctx.restore();\n\n \/\/ Wave lines\n const waves = [\n {y:0.05, amp:4, freq:0.020, spd:0.9, alpha:0.7},\n {y:0.25, amp:3.5,freq:0.025, spd:1.2, alpha:0.6},\n {y:0.55, amp:2.5,freq:0.032, spd:1.6, alpha:0.5},\n {y:0.80, amp:1.8,freq:0.045, spd:2.0, alpha:0.4},\n ];\n waves.forEach(w => {\n const wy = seaTop + w.y*(seaBot-seaTop);\n ctx.beginPath();\n for (let px=0;px<=W;px+=3) {\n const y = wy + w.amp*Math.sin(px*w.freq + time*w.spd);\n px===0 ? ctx.moveTo(px,y) : ctx.lineTo(px,y);\n }\n ctx.strokeStyle = `rgba(180,230,255,${w.alpha})`;\n ctx.lineWidth = 1;\n ctx.stroke();\n });\n\n \/\/ Glints\n for (let i=0;i<12;i++) {\n const gx = ((i*137.5 + time*30) % W);\n const gy = seaTop + (i%4)\/4*(seaBot-seaTop)*0.6;\n const gb = Math.pow(Math.max(0,Math.sin(time*1.5+i*0.8)),3);\n if (gb>0.1) {\n ctx.save(); ctx.globalAlpha = gb*0.7;\n ctx.strokeStyle='#fff'; ctx.lineWidth=1;\n const arm=gb*6;\n ctx.beginPath();\n ctx.moveTo(gx-arm,gy); ctx.lineTo(gx+arm,gy);\n ctx.moveTo(gx,gy-arm); ctx.lineTo(gx,gy+arm);\n ctx.stroke(); ctx.restore();\n }\n }\n }\n\n function drawTerrace(warmth) {\n \/\/ Stone wall \/ terrace foreground\n const wallTop = H * 0.73;\n const wallBot = H;\n\n \/\/ Wall fill \u2014 warm Cornish granite\n const wg = ctx.createLinearGradient(0, wallTop, 0, wallBot);\n wg.addColorStop(0, `rgb(${lerp(80,100,warmth)},${lerp(72,85,warmth)},${lerp(65,72,warmth)})`);\n wg.addColorStop(0.3, `rgb(${lerp(60,80,warmth)},${lerp(55,68,warmth)},${lerp(48,56,warmth)})`);\n wg.addColorStop(1, `rgb(${lerp(35,50,warmth)},${lerp(30,42,warmth)},${lerp(25,32,warmth)})`);\n ctx.fillStyle = wg;\n ctx.fillRect(0, wallTop, W, wallBot-wallTop);\n\n \/\/ Stone texture \u2014 rows of blocks\n ctx.save();\n ctx.globalAlpha = 0.12;\n ctx.strokeStyle = '#000';\n ctx.lineWidth = 1;\n const blockH = 18;\n for (let row=0; row < 8; row++) {\n const ry = wallTop + row*blockH;\n ctx.beginPath(); ctx.moveTo(0,ry); ctx.lineTo(W,ry); ctx.stroke();\n const offset = (row%2===0) ? 0 : 40;\n for (let bx=offset; bx<W; bx+=80) {\n ctx.beginPath(); ctx.moveTo(bx,ry); ctx.lineTo(bx,ry+blockH); ctx.stroke();\n }\n }\n ctx.restore();\n\n \/\/ Wall top edge \u2014 lighter capstones\n ctx.fillStyle = `rgba(${lerp(110,140,warmth)},${lerp(100,120,warmth)},${lerp(88,100,warmth)},0.9)`;\n ctx.fillRect(0, wallTop, W, 5);\n\n \/\/ Ambient light on wall from cinema screen (left of cinema)\n const screenLightX = W * 0.32;\n const sl = ctx.createRadialGradient(screenLightX, wallTop, 0, screenLightX, wallTop, W*0.35);\n sl.addColorStop(0, 'rgba(200,220,255,0.12)');\n sl.addColorStop(1, 'rgba(200,220,255,0)');\n ctx.fillStyle = sl;\n ctx.fillRect(0, wallTop, W, wallBot-wallTop);\n }\n\n function drawCinema(time, ci, warmth, sunX, sunY) {\n \/\/ Cinema is placed center-left of terrace\n const cx = W * 0.28; \/\/ center x of cinema setup\n const baseY = H * 0.73; \/\/ top of wall\n\n ctx.save();\n \/\/ Scale in from bottom during intro\n const scaleY = ci;\n ctx.translate(cx, baseY);\n ctx.scale(1, scaleY);\n ctx.translate(-cx, -baseY);\n\n \/\/ \u2500\u2500 SCREEN FRAME \/ STAND \u2500\u2500\n const screenW = Math.min(W * 0.22, 200);\n const screenH = screenW * 0.58;\n const screenX = cx - screenW\/2;\n const screenY = baseY - screenH - 60;\n\n \/\/ Screen pole \/ stand\n const poleX = cx;\n ctx.fillStyle = `rgba(${lerp(60,80,warmth)},${lerp(55,70,warmth)},${lerp(50,60,warmth)},0.95)`;\n ctx.fillRect(poleX-4, screenY+screenH, 8, 60);\n \/\/ Feet\n ctx.fillRect(poleX-28, baseY-8, 56, 8);\n\n \/\/ Screen glow behind screen\n const sg = ctx.createRadialGradient(cx, screenY+screenH\/2, 0, cx, screenY+screenH\/2, screenW*0.9);\n const flickerA = 0.18 + 0.04*Math.sin(time*7.3) + 0.02*Math.sin(time*13.1);\n sg.addColorStop(0, `rgba(180,200,255,${flickerA})`);\n sg.addColorStop(0.5, `rgba(140,170,255,${flickerA*0.4})`);\n sg.addColorStop(1, 'rgba(100,140,255,0)');\n ctx.fillStyle = sg;\n ctx.beginPath();\n ctx.ellipse(cx, screenY+screenH\/2, screenW*0.85, screenH*0.85, 0, 0, Math.PI*2);\n ctx.fill();\n\n \/\/ Screen border frame (white border)\n ctx.fillStyle = `rgba(220,220,220,0.95)`;\n ctx.beginPath();\n ctx.roundRect(screenX-5, screenY-5, screenW+10, screenH+10, 4);\n ctx.fill();\n\n \/\/ Screen surface \u2014 animated \"film\" content\n drawFilmContent(ctx, screenX, screenY, screenW, screenH, time);\n\n \/\/ Screen frame border\n ctx.strokeStyle = 'rgba(60,60,60,0.8)';\n ctx.lineWidth = 2;\n ctx.strokeRect(screenX-5, screenY-5, screenW+10, screenH+10);\n\n \/\/ \u2500\u2500 PROJECTOR BEAM \u2500\u2500\n \/\/ Beam from projector (right side) to screen\n const projX = cx + screenW * 1.1 + 30;\n const projY = baseY - 32;\n\n ctx.save();\n const beamFlicker = 0.12 + 0.04*Math.sin(time*9.1) + 0.02*Math.sin(time*17.3);\n const beamGrad = ctx.createLinearGradient(projX, projY, cx, screenY+screenH\/2);\n beamGrad.addColorStop(0, `rgba(255,255,220,${beamFlicker})`);\n beamGrad.addColorStop(0.5, `rgba(200,210,255,${beamFlicker*0.6})`);\n beamGrad.addColorStop(1, `rgba(180,200,255,${beamFlicker*0.2})`);\n\n ctx.fillStyle = beamGrad;\n ctx.beginPath();\n ctx.moveTo(projX-4, projY-2);\n ctx.lineTo(projX+4, projY+2);\n ctx.lineTo(screenX+screenW+5, screenY);\n ctx.lineTo(screenX+screenW+5, screenY+screenH);\n ctx.closePath();\n ctx.fill();\n ctx.restore();\n\n \/\/ \u2500\u2500 PROJECTOR BODY \u2500\u2500\n drawProjector(ctx, projX, projY, time, warmth);\n\n \/\/ \u2500\u2500 PROJECTOR STAND \/ TABLE \u2500\u2500\n ctx.fillStyle = `rgba(${lerp(55,75,warmth)},${lerp(50,65,warmth)},${lerp(44,55,warmth)},0.95)`;\n ctx.fillRect(projX-15, projY+14, 30, 28);\n ctx.fillRect(projX-22, baseY-8, 44, 8);\n\n \/\/ \u2500\u2500 FAIRY LIGHTS \u2500\u2500\n drawFairyLights(ctx, screenX-20, screenY-10, projX+30, projY-10, time);\n\n \/\/ \u2500\u2500 DECKCHAIRS \u2500\u2500\n drawDeckchairs(ctx, cx, baseY, screenW, time);\n\n ctx.restore(); \/\/ end of ci scale\n }\n\n function drawFilmContent(ctx, sx, sy, sw, sh, time) {\n ctx.save();\n ctx.beginPath();\n ctx.rect(sx, sy, sw, sh);\n ctx.clip();\n\n \/\/ Animated scene: ocean sunset on screen (meta!)\n const flick = 0.95 + 0.05*Math.sin(time*6.7);\n const skyG = ctx.createLinearGradient(sx, sy, sx, sy+sh*0.55);\n skyG.addColorStop(0, `rgba(${Math.round(200*flick)},120,60,1)`);\n skyG.addColorStop(1, `rgba(${Math.round(255*flick)},160,80,1)`);\n ctx.fillStyle = skyG;\n ctx.fillRect(sx, sy, sw, sh*0.55);\n\n \/\/ Sea on screen\n const seaG = ctx.createLinearGradient(sx, sy+sh*0.55, sx, sy+sh);\n seaG.addColorStop(0, `rgba(${Math.round(30*flick)},80,140,1)`);\n seaG.addColorStop(1, `rgba(${Math.round(15*flick)},50,100,1)`);\n ctx.fillStyle = seaG;\n ctx.fillRect(sx, sy+sh*0.55, sw, sh*0.45);\n\n \/\/ Screen waves\n ctx.beginPath();\n for (let px=0;px<=sw;px+=2) {\n const wy = sy+sh*0.57 + 3*Math.sin(px*0.12+time*2.5);\n px===0?ctx.moveTo(sx+px,wy):ctx.lineTo(sx+px,wy);\n }\n ctx.strokeStyle=`rgba(180,220,255,0.7)`;\n ctx.lineWidth=1;\n ctx.stroke();\n\n \/\/ Screen sun\n const scSunX = sx+sw*0.7, scSunY = sy+sh*0.25;\n const scSunG = ctx.createRadialGradient(scSunX,scSunY,0,scSunX,scSunY,sw*0.12);\n scSunG.addColorStop(0,'rgba(255,255,200,1)');\n scSunG.addColorStop(1,'rgba(255,160,40,0)');\n ctx.fillStyle=scSunG;\n ctx.beginPath(); ctx.arc(scSunX,scSunY,sw*0.12,0,Math.PI*2); ctx.fill();\n\n \/\/ Film grain effect\n ctx.globalAlpha = 0.03 + 0.02*Math.sin(time*40);\n for (let i=0;i<200;i++) {\n ctx.fillStyle = Math.random()>0.5?'#fff':'#000';\n ctx.fillRect(sx+Math.random()*sw, sy+Math.random()*sh, 1, 1);\n }\n ctx.globalAlpha = 1;\n ctx.restore();\n\n \/\/ Scanline overlay\n ctx.save();\n ctx.globalAlpha = 0.06;\n for (let ly=sy;ly<sy+sh;ly+=3) {\n ctx.fillStyle='#000';\n ctx.fillRect(sx, ly, sw, 1);\n }\n ctx.restore();\n }\n\n function drawProjector(ctx, px, py, time, warmth) {\n \/\/ Lens glow\n const lg = ctx.createRadialGradient(px-18, py, 0, px-18, py, 14);\n lg.addColorStop(0, `rgba(255,255,200,${0.8+0.15*Math.sin(time*8.1)})`);\n lg.addColorStop(0.4,'rgba(255,230,100,0.4)');\n lg.addColorStop(1, 'rgba(255,200,50,0)');\n ctx.fillStyle = lg;\n ctx.beginPath(); ctx.arc(px-18, py, 14, 0, Math.PI*2); ctx.fill();\n\n \/\/ Body\n const bodyCol = `rgb(${lerp(50,70,warmth)},${lerp(48,65,warmth)},${lerp(44,58,warmth)})`;\n ctx.fillStyle = bodyCol;\n ctx.beginPath();\n ctx.roundRect(px-42, py-12, 52, 24, 4);\n ctx.fill();\n\n \/\/ Lens barrel\n ctx.fillStyle = `rgb(${lerp(35,50,warmth)},${lerp(32,46,warmth)},${lerp(28,40,warmth)})`;\n ctx.beginPath();\n ctx.roundRect(px-22, py-9, 22, 18, 8);\n ctx.fill();\n\n \/\/ Lens face\n const lensFlare = 0.6 + 0.3*Math.sin(time*7.3);\n ctx.fillStyle = `rgba(180,200,255,${lensFlare})`;\n ctx.beginPath(); ctx.arc(px-14, py, 7, 0, Math.PI*2); ctx.fill();\n ctx.fillStyle='rgba(255,255,255,0.8)';\n ctx.beginPath(); ctx.arc(px-16, py-2, 2.5, 0, Math.PI*2); ctx.fill();\n\n \/\/ Reel on top\n ctx.fillStyle = `rgb(${lerp(42,58,warmth)},${lerp(40,54,warmth)},${lerp(36,48,warmth)})`;\n ctx.beginPath(); ctx.arc(px-25, py-20, 10, 0, Math.PI*2); ctx.fill();\n \/\/ Reel spokes\n ctx.save(); ctx.translate(px-25, py-20); ctx.rotate(time*1.5);\n ctx.strokeStyle=`rgba(${lerp(60,80,warmth)},${lerp(58,76,warmth)},${lerp(52,68,warmth)},0.8)`;\n ctx.lineWidth=1.5;\n for(let i=0;i<6;i++) {\n const a=(i\/6)*Math.PI*2;\n ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(Math.cos(a)*9,Math.sin(a)*9); ctx.stroke();\n }\n ctx.restore();\n ctx.fillStyle='rgba(80,80,80,0.9)';\n ctx.beginPath(); ctx.arc(px-25,py-20,3,0,Math.PI*2); ctx.fill();\n }\n\n function drawFairyLights(ctx, x1, y1, x2, y2, time) {\n const segs = 18;\n const sagAmount = 22;\n\n \/\/ Wire\n ctx.beginPath();\n ctx.strokeStyle = 'rgba(60,55,50,0.7)';\n ctx.lineWidth = 1;\n for (let i=0;i<=segs;i++) {\n const ft = i\/segs;\n const x = lerp(x1,x2,ft);\n const sag = Math.sin(ft*Math.PI)*sagAmount;\n const y = lerp(y1,y2,ft) + sag;\n i===0 ? ctx.moveTo(x,y) : ctx.lineTo(x,y);\n }\n ctx.stroke();\n\n \/\/ Bulbs\n const colours = ['#FF6B35','#F7C948','#4ECDC4','#FF8FAB','#A8EDEA','#FFF176'];\n for (let i=0;i<=segs;i++) {\n const ft = i\/segs;\n const x = lerp(x1,x2,ft);\n const sag = Math.sin(ft*Math.PI)*sagAmount;\n const y = lerp(y1,y2,ft) + sag;\n const col = colours[i%colours.length];\n const flicker = 0.7 + 0.3*Math.sin(time*4+i*1.7);\n\n \/\/ Glow\n ctx.save();\n ctx.globalAlpha = flicker*0.5;\n const bg = ctx.createRadialGradient(x,y,0,x,y,10);\n bg.addColorStop(0, col); bg.addColorStop(1,'rgba(0,0,0,0)');\n ctx.fillStyle = bg;\n ctx.beginPath(); ctx.arc(x,y,10,0,Math.PI*2); ctx.fill();\n ctx.restore();\n\n \/\/ Bulb\n ctx.save();\n ctx.globalAlpha = flicker;\n ctx.fillStyle = col;\n ctx.beginPath(); ctx.arc(x, y+4, 3.5, 0, Math.PI*2); ctx.fill();\n ctx.fillStyle = 'rgba(0,0,0,0.6)';\n ctx.fillRect(x-1.5, y, 3, 4);\n ctx.restore();\n }\n }\n\n function drawDeckchairs(ctx, cx, baseY, screenW, time) {\n \/\/ 3 deck chairs in front of screen, slightly left-centre\n const chairs = [\n { x: cx - screenW*0.55, tilt: -0.15, col: '#E84855', stripeCol: '#fff' },\n { x: cx - screenW*0.15, tilt: -0.1, col: '#3A86FF', stripeCol: '#fff' },\n { x: cx + screenW*0.25, tilt: -0.08, col: '#F7C948', stripeCol: '#333' },\n ];\n chairs.forEach((ch, i) => {\n const bob = Math.sin(time*0.5 + i*1.2) * 1.5;\n drawDeckchair(ctx, ch.x, baseY - 8 + bob, ch.tilt, ch.col, ch.stripeCol);\n });\n }\n\n function drawDeckchair(ctx, x, y, tilt, col, stripe) {\n ctx.save();\n ctx.translate(x, y);\n ctx.rotate(tilt);\n\n const cw = 26, ch = 16;\n\n \/\/ Seat fabric\n ctx.fillStyle = col;\n ctx.beginPath(); ctx.roundRect(-cw\/2, -ch, cw, ch, 2); ctx.fill();\n\n \/\/ Stripes\n ctx.save();\n ctx.beginPath(); ctx.roundRect(-cw\/2, -ch, cw, ch, 2); ctx.clip();\n ctx.fillStyle = stripe;\n ctx.globalAlpha = 0.25;\n for (let sx=-cw\/2; sx<cw\/2; sx+=5) {\n ctx.fillRect(sx, -ch, 2.5, ch);\n }\n ctx.restore();\n\n \/\/ Back rest\n ctx.fillStyle = col;\n ctx.save();\n ctx.rotate(-0.55);\n ctx.beginPath(); ctx.roundRect(-cw\/2, -ch*1.2, cw, ch*0.95, 2); ctx.fill();\n \/\/ Back stripes\n ctx.save();\n ctx.beginPath(); ctx.roundRect(-cw\/2, -ch*1.2, cw, ch*0.95, 2); ctx.clip();\n ctx.fillStyle = stripe;\n ctx.globalAlpha = 0.25;\n for (let sx=-cw\/2; sx<cw\/2; sx+=5) {\n ctx.fillRect(sx, -ch*1.2, 2.5, ch*0.95);\n }\n ctx.restore(); ctx.restore();\n\n \/\/ Legs\n ctx.strokeStyle = `rgba(60,50,40,0.85)`;\n ctx.lineWidth = 2;\n \/\/ Front legs\n ctx.beginPath(); ctx.moveTo(-cw\/2+4, 0); ctx.lineTo(-cw\/2-2, 12); ctx.stroke();\n ctx.beginPath(); ctx.moveTo(cw\/2-4, 0); ctx.lineTo(cw\/2+2, 12); ctx.stroke();\n \/\/ Crossbar\n ctx.beginPath(); ctx.moveTo(-cw\/2, 6); ctx.lineTo(cw\/2, 6); ctx.stroke();\n\n ctx.restore();\n }\n\n \/* \u2500\u2500\u2500 SPARKLES ON CLICK \u2500\u2500\u2500 *\/\n function burst(ex, ey) {\n const rect = hero.getBoundingClientRect();\n const bx = ex - rect.left;\n const by = ey - rect.top;\n\n const colours = ['#F7C948','#FF6B35','#4ECDC4','#FF8FAB','#FFF176','#A8EDEA','#fff','#FF4D2E'];\n const count = 32;\n\n for (let i=0; i<count; i++) {\n const angle = (i\/count)*Math.PI*2 + Math.random()*0.3;\n const speed = 60 + Math.random()*180;\n const size = 4 + Math.random()*10;\n const col = colours[Math.floor(Math.random()*colours.length)];\n const dur = 0.5 + Math.random()*0.7;\n const gravity= speed * 0.8;\n\n const el = document.createElement('div');\n el.className = 'spark';\n el.style.cssText = `\n left:${bx}px; top:${by}px;\n width:${size}px; height:${size}px;\n background:${col};\n box-shadow: 0 0 ${size*2}px ${col};\n --tx:${Math.cos(angle)*speed}px;\n --ty:${Math.sin(angle)*speed + gravity}px;\n --dur:${dur}s;\n border-radius:${Math.random()>0.4?'50%':'3px'};\n transform-origin:center;\n `;\n sparks.appendChild(el);\n el.addEventListener('animationend',()=>el.remove());\n }\n\n \/\/ Big star bursts\n const stars = ['\u2605','\u2726','\u2727','\u2728','\u25c6'];\n for (let i=0;i<8;i++) {\n const angle = Math.random()*Math.PI*2;\n const speed = 40+Math.random()*100;\n const el = document.createElement('div');\n el.className='spark-star';\n el.textContent = stars[Math.floor(Math.random()*stars.length)];\n const col = colours[Math.floor(Math.random()*colours.length)];\n el.style.cssText = `\n left:${bx}px; top:${by}px;\n color:${col};\n text-shadow:0 0 8px ${col};\n --tx:${Math.cos(angle)*speed}px;\n --ty:${Math.sin(angle)*speed + speed*0.5}px;\n --dur:${0.6+Math.random()*0.5}s;\n --sz:${12+Math.random()*14}px;\n `;\n sparks.appendChild(el);\n el.addEventListener('animationend',()=>el.remove());\n }\n\n \/\/ Central flash\n const flash = document.createElement('div');\n flash.style.cssText = `\n position:absolute;\n left:${bx-30}px; top:${by-30}px;\n width:60px; height:60px;\n border-radius:50%;\n background:radial-gradient(circle, rgba(255,255,200,0.9) 0%, rgba(255,200,50,0.4) 40%, transparent 70%);\n pointer-events:none;\n animation:sparkFly 0.35s ease-out forwards;\n --tx:0px; --ty:0px;\n `;\n sparks.appendChild(flash);\n flash.addEventListener('animationend',()=>flash.remove());\n }\n\n \/* \u2500\u2500\u2500 MOUSE \/ TOUCH \u2500\u2500\u2500 *\/\n hero.addEventListener('mousemove', e => {\n const r = hero.getBoundingClientRect();\n mouseX = clamp((e.clientX - r.left)\/W, 0, 1);\n mouseY = clamp((e.clientY - r.top)\/H, 0, 1);\n cursor.style.left = e.clientX+'px';\n cursor.style.top = e.clientY+'px';\n });\n\n hero.addEventListener('click', e => burst(e.clientX, e.clientY));\n\n hero.addEventListener('touchstart', e => {\n const touch = e.touches[0];\n burst(touch.clientX, touch.clientY);\n }, {passive:true});\n\n hero.addEventListener('touchmove', e => {\n const r = hero.getBoundingClientRect();\n const touch = e.touches[0];\n mouseX = clamp((touch.clientX - r.left)\/W, 0, 1);\n mouseY = clamp((touch.clientY - r.top)\/H, 0, 1);\n }, {passive:true});\n\n cta.addEventListener('mouseenter', () => cursor.classList.add('big'));\n cta.addEventListener('mouseleave', () => cursor.classList.remove('big'));\n\n \/* \u2500\u2500\u2500 EASING \u2500\u2500\u2500 *\/\n function easeOutBack(t) {\n const c1=1.70158, c3=c1+1;\n return 1+c3*Math.pow(t-1,3)+c1*Math.pow(t-1,2);\n }\n\n \/* \u2500\u2500\u2500 RENDER LOOP \u2500\u2500\u2500 *\/\n let lastTs = 0;\n function frame(ts) {\n const dt = Math.min((ts - lastTs)\/1000, 0.05);\n lastTs = ts;\n t += dt;\n\n if (isTouch) {\n autoT += dt;\n mouseX = 0.4 + Math.sin(autoT*0.4)*0.2;\n mouseY = 0.35 + Math.sin(autoT*0.25)*0.08;\n }\n\n smX += (mouseX - smX) * 0.04;\n smY += (mouseY - smY) * 0.04;\n\n ctx.clearRect(0,0,W,H);\n drawScene(t);\n requestAnimationFrame(frame);\n }\n\n requestAnimationFrame(ts => { lastTs=ts; requestAnimationFrame(frame); });\n})();\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Cine Del Mar \ud83c\udf0a Outdoor Cinema \u00b7 Cornwall CineDel Mar Immersive open-air cinema across Cornwall’s most spectacular coastal venues. Great […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/frosty-brahmagupta.77-68-90-22.plesk.page\/index.php?rest_route=\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frosty-brahmagupta.77-68-90-22.plesk.page\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/frosty-brahmagupta.77-68-90-22.plesk.page\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/frosty-brahmagupta.77-68-90-22.plesk.page\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frosty-brahmagupta.77-68-90-22.plesk.page\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9"}],"version-history":[{"count":10,"href":"https:\/\/frosty-brahmagupta.77-68-90-22.plesk.page\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":19,"href":"https:\/\/frosty-brahmagupta.77-68-90-22.plesk.page\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions\/19"}],"wp:attachment":[{"href":"https:\/\/frosty-brahmagupta.77-68-90-22.plesk.page\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n\n\nCine Del Mar<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,400;1,700&family=Inter:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n<style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n html, body { width: 100%; height: 100%; overflow-x: hidden; background: #0a1f3d; }\n\n #hero {\n position: relative;\n width: 100%;\n height: 100svh;\n min-height: 600px;\n overflow: hidden;\n cursor: none;\n font-family: 'Inter', sans-serif;\n -webkit-font-smoothing: antialiased;\n }\n\n #main-canvas {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n display: block;\n }\n\n \/* Content overlay *\/\n #content {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 20px 24px 140px;\n z-index: 20;\n pointer-events: none;\n }\n\n .eyebrow {\n font-size: 11px;\n font-weight: 600;\n letter-spacing: 0.28em;\n text-transform: uppercase;\n color: rgba(247,201,72,0.95);\n margin-bottom: 16px;\n text-shadow: 0 2px 12px rgba(0,0,0,0.6);\n animation: fadeUp 1s ease 0.3s both;\n }\n\n .title {\n font-family: 'Playfair Display', serif;\n font-style: italic;\n font-weight: 900;\n font-size: clamp(54px, 12vw, 110px);\n line-height: 0.88;\n color: #fff;\n text-shadow: 0 4px 40px rgba(0,0,0,0.5), 0 0 80px rgba(247,201,72,0.1);\n animation: fadeUp 1s ease 0.5s both;\n letter-spacing: -0.02em;\n }\n .title .mar { color: #F7C948; display: block; }\n\n .rule {\n width: 50px; height: 1.5px;\n background: rgba(247,201,72,0.5);\n margin: 22px auto;\n animation: fadeUp 1s ease 0.7s both;\n }\n\n .tagline {\n font-family: 'Playfair Display', serif;\n font-style: italic;\n font-size: clamp(14px, 2.2vw, 19px);\n color: rgba(240,249,255,0.9);\n max-width: 460px;\n line-height: 1.6;\n text-shadow: 0 2px 16px rgba(0,0,0,0.7);\n margin-bottom: 36px;\n animation: fadeUp 1s ease 0.8s both;\n }\n\n .cta {\n pointer-events: all;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: #FF6B35;\n color: #fff;\n font-family: 'Inter', sans-serif;\n font-weight: 600;\n font-size: 15px;\n letter-spacing: 0.04em;\n padding: 15px 34px;\n border-radius: 50px;\n text-decoration: none;\n border: none;\n cursor: none;\n box-shadow: 0 8px 32px rgba(255,107,53,0.5);\n transition: transform 0.2s, box-shadow 0.2s;\n animation: fadeUp 1s ease 1s both;\n }\n .cta:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 44px rgba(255,107,53,0.6); }\n\n \/* Custom cursor *\/\n #cursor {\n position: fixed;\n width: 18px; height: 18px;\n border-radius: 50%;\n background: rgba(247,201,72,0.9);\n box-shadow: 0 0 18px rgba(247,201,72,0.7), 0 0 50px rgba(247,201,72,0.25);\n pointer-events: none;\n transform: translate(-50%, -50%);\n z-index: 9999;\n mix-blend-mode: screen;\n transition: width 0.2s, height 0.2s, background 0.2s;\n }\n #cursor.big {\n width: 36px; height: 36px;\n background: rgba(255,107,53,0.9);\n }\n\n \/* Sparkle container *\/\n #sparks { position: absolute; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }\n\n .spark {\n position: absolute;\n border-radius: 50%;\n pointer-events: none;\n animation: sparkFly var(--dur) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;\n }\n @keyframes sparkFly {\n 0% { opacity: 1; transform: translate(0,0) scale(1) rotate(0deg); }\n 100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.1) rotate(var(--rot)); }\n }\n\n .spark-star {\n position: absolute;\n pointer-events: none;\n animation: starFly var(--dur) ease-out forwards;\n font-size: var(--sz);\n line-height: 1;\n }\n @keyframes starFly {\n 0% { opacity: 1; transform: translate(0,0) scale(1); }\n 60% { opacity: 1; }\n 100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.3); }\n }\n\n \/* Scroll hint *\/\n #scroll-hint {\n position: absolute;\n bottom: 28px; left: 50%;\n transform: translateX(-50%);\n z-index: 20;\n display: flex; flex-direction: column; align-items: center; gap: 6px;\n color: rgba(240,249,255,0.5);\n font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;\n animation: fadeUp 1s ease 1.4s both;\n }\n .scroll-line {\n width: 1px; height: 36px;\n background: linear-gradient(to bottom, rgba(247,201,72,0.6), transparent);\n animation: scrollAnim 2s ease-in-out infinite;\n }\n @keyframes scrollAnim {\n 0%,100%{ transform: scaleY(1); transform-origin:top; }\n 50% { transform: scaleY(0.3); transform-origin:top; }\n }\n\n @keyframes fadeUp {\n from { opacity:0; transform: translateY(20px); }\n to { opacity:1; transform: translateY(0); }\n }\n\n @media (hover:none) { #hero { cursor: auto; } #cursor { display:none; } }\n @media (max-width:480px) { #content { padding-bottom: 110px; } }\n @media (prefers-reduced-motion:reduce) {\n .eyebrow,.title,.rule,.tagline,.cta,#scroll-hint { animation:none; opacity:1; transform:none; }\n }\n<\/style>\n<\/head>\n<body>\n<div id=\"hero\">\n <canvas id=\"main-canvas\"><\/canvas>\n <div id=\"sparks\"><\/div>\n\n <div id=\"content\">\n <p class=\"eyebrow\">\ud83c\udf0a Outdoor Cinema \u00b7 Cornwall<\/p>\n <h1 class=\"title\">Cine<span class=\"mar\">Del Mar<\/span><\/h1>\n <div class=\"rule\"><\/div>\n <p class=\"tagline\">Immersive open-air cinema across Cornwall's most spectacular coastal venues. Great films, real atmosphere, under the stars.<\/p>\n <a href=\"#events\" class=\"cta\">\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"\/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"\/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/><\/svg>\n See What's On\n <\/a>\n <\/div>\n\n <div id=\"scroll-hint\">\n <div class=\"scroll-line\"><\/div>\n scroll\n <\/div>\n<\/div>\n\n<div id=\"cursor\"><\/div>\n\n<script>\n(function(){\n const hero = document.getElementById('hero');\n const canvas = document.getElementById('main-canvas');\n const ctx = canvas.getContext('2d');\n const sparks = document.getElementById('sparks');\n const cursor = document.getElementById('cursor');\n const cta = document.querySelector('.cta');\n\n let W, H;\n let mouseX = 0.55, mouseY = 0.35;\n let smX = 0.55, smY = 0.35;\n let isTouch = window.matchMedia('(hover:none)').matches;\n let autoT = 0;\n let t = 0;\n\n function resize() {\n W = canvas.width = hero.offsetWidth;\n H = canvas.height = hero.offsetHeight;\n }\n resize();\n window.addEventListener('resize', resize);\n\n \/* \u2500\u2500\u2500 HELPERS \u2500\u2500\u2500 *\/\n const lerp = (a,b,t) => a+(b-a)*t;\n const clamp = (v,lo,hi) => Math.max(lo,Math.min(hi,v));\n\n \/* \u2500\u2500\u2500 SEAGULLS \u2500\u2500\u2500 *\/\n class Gull {\n constructor(startRight) {\n this.reset(startRight, true);\n }\n reset(fromRight, init) {\n this.fromRight = fromRight;\n this.x = fromRight ? W + 80 : -80;\n this.y = H * (0.08 + Math.random() * 0.32);\n this.baseY = this.y;\n this.speed = 0.6 + Math.random() * 0.9;\n this.wingT = Math.random() * Math.PI * 2;\n this.wingSpeed = 0.06 + Math.random() * 0.04;\n this.scale = 0.5 + Math.random() * 0.7;\n this.bobAmp = 6 + Math.random() * 8;\n this.bobFreq = 0.3 + Math.random() * 0.3;\n if (init) {\n \/\/ scatter starting positions\n this.x = fromRight\n ? W * (0.5 + Math.random() * 0.8)\n : W * (-0.3 + Math.random() * 0.5);\n }\n }\n update() {\n this.x += this.fromRight ? -this.speed : this.speed;\n this.wingT += this.wingSpeed;\n this.y = this.baseY + Math.sin(this.wingT * this.bobFreq * 6) * this.bobAmp;\n \/\/ gone off screen\n if (this.fromRight && this.x < -120) this.reset(Math.random()>0.5, false);\n if (!this.fromRight && this.x > W+120) this.reset(Math.random()>0.5, false);\n }\n draw(ctx) {\n const flap = Math.sin(this.wingT);\n const s = this.scale;\n const facing = this.fromRight ? -1 : 1; \/\/ -1 = facing left\n\n ctx.save();\n ctx.translate(this.x, this.y);\n ctx.scale(facing * s, s);\n\n \/\/ Body\n ctx.fillStyle = 'rgba(255,255,255,0.92)';\n ctx.beginPath();\n ctx.ellipse(0, 0, 14, 5, 0, 0, Math.PI*2);\n ctx.fill();\n\n \/\/ Head\n ctx.beginPath();\n ctx.ellipse(14, -3, 6, 5, -0.3, 0, Math.PI*2);\n ctx.fill();\n\n \/\/ Beak\n ctx.fillStyle = 'rgba(255,190,80,0.95)';\n ctx.beginPath();\n ctx.moveTo(19, -2);\n ctx.lineTo(26, -1);\n ctx.lineTo(19, 1);\n ctx.closePath();\n ctx.fill();\n\n \/\/ Eye\n ctx.fillStyle = '#333';\n ctx.beginPath();\n ctx.arc(16, -4, 1.5, 0, Math.PI*2);\n ctx.fill();\n\n \/\/ Left wing (top)\n const wUp = flap * 18;\n ctx.fillStyle = 'rgba(245,245,245,0.95)';\n ctx.beginPath();\n ctx.moveTo(-2, -2);\n ctx.quadraticCurveTo(-16, -8 - wUp, -34, -6 - wUp * 0.5);\n ctx.quadraticCurveTo(-20, 0, -2, 4);\n ctx.closePath();\n ctx.fill();\n \/\/ Wing tip detail\n ctx.strokeStyle = 'rgba(180,180,180,0.5)';\n ctx.lineWidth = 0.8;\n ctx.beginPath();\n ctx.moveTo(-30, -5 - wUp*0.4);\n ctx.lineTo(-34, -6 - wUp*0.5);\n ctx.stroke();\n\n \/\/ Right wing (bottom, mirrored slightly)\n const wDn = flap * 14;\n ctx.fillStyle = 'rgba(230,230,230,0.9)';\n ctx.beginPath();\n ctx.moveTo(-2, 2);\n ctx.quadraticCurveTo(-14, 6 + wDn, -30, 8 + wDn*0.5);\n ctx.quadraticCurveTo(-18, 2, -2, -1);\n ctx.closePath();\n ctx.fill();\n\n \/\/ Tail\n ctx.fillStyle = 'rgba(240,240,240,0.9)';\n ctx.beginPath();\n ctx.moveTo(-12, 0);\n ctx.lineTo(-22, -4);\n ctx.lineTo(-24, 4);\n ctx.closePath();\n ctx.fill();\n\n ctx.restore();\n }\n }\n\n const gulls = [\n new Gull(false), new Gull(true), new Gull(false),\n new Gull(true), new Gull(false)\n ];\n\n \/* \u2500\u2500\u2500 OUTDOOR CINEMA SCENE \u2500\u2500\u2500 *\/\n \/\/ Positioned on right side of cliff terrace\n let cinemaIntro = 0; \/\/ 0\u21921 over time, drives animation in\n\n function drawScene(time) {\n cinemaIntro = clamp(cinemaIntro + 0.008, 0, 1);\n const ci = easeOutBack(cinemaIntro);\n\n \/\/ \u2500\u2500 SKY \u2500\u2500\n const warmth = smX;\n const skyTop = ctx.createLinearGradient(0, 0, 0, H * 0.62);\n skyTop.addColorStop(0, `rgb(${lerp(30,100,warmth)},${lerp(80,110,warmth)},${lerp(160,140,warmth)})`);\n skyTop.addColorStop(0.5, `rgb(${lerp(180,255,warmth)},${lerp(160,140,warmth)},${lerp(200,80,warmth)})`);\n skyTop.addColorStop(1, `rgb(${lerp(220,255,warmth)},${lerp(180,150,warmth)},${lerp(160,80,warmth)})`);\n ctx.fillStyle = skyTop;\n ctx.fillRect(0, 0, W, H);\n\n \/\/ \u2500\u2500 SUN \u2500\u2500\n const sunX = W * (0.12 + smX * 0.65);\n const sunY = H * (0.06 + (1-smY) * 0.3);\n drawSun(sunX, sunY, warmth, time);\n\n \/\/ \u2500\u2500 DISTANT CLIFFS (parallax layers) \u2500\u2500\n drawCliffs(warmth);\n\n \/\/ \u2500\u2500 SEA \u2500\u2500\n drawSea(time, warmth, sunX);\n\n \/\/ \u2500\u2500 FOREGROUND CLIFF \/ TERRACE \u2500\u2500\n drawTerrace(warmth);\n\n \/\/ \u2500\u2500 OUTDOOR CINEMA \u2500\u2500\n drawCinema(time, ci, warmth, sunX, sunY);\n\n \/\/ \u2500\u2500 SEAGULLS \u2500\u2500\n gulls.forEach(g => { g.update(); g.draw(ctx); });\n\n \/\/ \u2500\u2500 VIGNETTE \u2500\u2500\n const vig = ctx.createRadialGradient(W\/2, H\/2, H*0.2, W\/2, H\/2, H*0.85);\n vig.addColorStop(0, 'rgba(0,0,0,0)');\n vig.addColorStop(1, 'rgba(0,0,0,0.45)');\n ctx.fillStyle = vig;\n ctx.fillRect(0,0,W,H);\n }\n\n function drawSun(sx, sy, warmth, time) {\n \/\/ Outer atmospheric glow\n const ag = ctx.createRadialGradient(sx,sy,0,sx,sy,200);\n ag.addColorStop(0, `rgba(255,${lerp(220,160,warmth)},${lerp(100,20,warmth)},0.35)`);\n ag.addColorStop(0.4, `rgba(255,${lerp(200,140,warmth)},${lerp(80,10,warmth)},0.1)`);\n ag.addColorStop(1, 'rgba(255,160,40,0)');\n ctx.fillStyle = ag;\n ctx.beginPath(); ctx.arc(sx,sy,200,0,Math.PI*2); ctx.fill();\n\n \/\/ Sun disc\n const sd = ctx.createRadialGradient(sx-4,sy-4,0,sx,sy,36);\n sd.addColorStop(0, '#fff9e0');\n sd.addColorStop(0.4, `rgb(255,${lerp(230,175,warmth)},${lerp(80,30,warmth)})`);\n sd.addColorStop(1, `rgb(255,${lerp(180,120,warmth)},0)`);\n ctx.fillStyle = sd;\n ctx.beginPath(); ctx.arc(sx,sy,36,0,Math.PI*2); ctx.fill();\n\n \/\/ Rays\n ctx.save();\n ctx.translate(sx,sy);\n ctx.globalAlpha = 0.07 + 0.03*Math.sin(time*0.4);\n for (let i=0;i<16;i++) {\n const ang = (i\/16)*Math.PI*2 + time*0.04;\n const len = 70 + 25*Math.sin(time*0.7+i);\n ctx.strokeStyle = '#fff5c0';\n ctx.lineWidth = 1.2;\n ctx.beginPath();\n ctx.moveTo(Math.cos(ang)*38, Math.sin(ang)*38);\n ctx.lineTo(Math.cos(ang)*(38+len), Math.sin(ang)*(38+len));\n ctx.stroke();\n }\n ctx.restore(); ctx.globalAlpha = 1;\n }\n\n function drawCliffs(warmth) {\n \/\/ Far headland \u2014 hazy, bluish\n const h1col = `rgba(${lerp(60,100,warmth)},${lerp(90,110,warmth)},${lerp(130,120,warmth)},0.55)`;\n ctx.fillStyle = h1col;\n ctx.beginPath();\n ctx.moveTo(0, H*0.58);\n ctx.lineTo(0, H*0.72);\n ctx.bezierCurveTo(W*0.05,H*0.65, W*0.12,H*0.60, W*0.22,H*0.58);\n ctx.bezierCurveTo(W*0.30,H*0.56, W*0.38,H*0.60, W*0.50,H*0.62);\n ctx.lineTo(W*0.50, H*0.75);\n ctx.lineTo(0, H*0.75);\n ctx.closePath();\n ctx.fill();\n\n \/\/ Mid headland (right side)\n const h2col = `rgba(${lerp(45,85,warmth)},${lerp(75,95,warmth)},${lerp(110,100,warmth)},0.7)`;\n ctx.fillStyle = h2col;\n ctx.beginPath();\n ctx.moveTo(W*0.72, H*0.75);\n ctx.lineTo(W*0.72, H*0.60);\n ctx.bezierCurveTo(W*0.78,H*0.55, W*0.86,H*0.54, W*0.92,H*0.56);\n ctx.bezierCurveTo(W*0.96,H*0.57, W,H*0.59, W,H*0.62);\n ctx.lineTo(W, H*0.75);\n ctx.closePath();\n ctx.fill();\n }\n\n function drawSea(time, warmth, sunX) {\n const seaTop = H * 0.60;\n const seaBot = H * 0.78;\n\n \/\/ Sea base gradient\n const sg = ctx.createLinearGradient(0, seaTop, 0, seaBot);\n sg.addColorStop(0, `rgb(${lerp(20,55,warmth)},${lerp(90,110,warmth)},${lerp(145,155,warmth)})`);\n sg.addColorStop(1, `rgb(${lerp(8,30,warmth)},${lerp(55,75,warmth)},${lerp(105,115,warmth)})`);\n ctx.fillStyle = sg;\n ctx.fillRect(0, seaTop, W, seaBot - seaTop);\n\n \/\/ Sun reflection\n const refW = 60 + smX*50;\n const rg = ctx.createLinearGradient(0, seaTop, 0, seaBot);\n rg.addColorStop(0, `rgba(255,${lerp(200,150,warmth)},${lerp(80,20,warmth)},${lerp(0.3,0.5,warmth)})`);\n rg.addColorStop(1, 'rgba(255,160,30,0)');\n ctx.save();\n ctx.fillStyle = rg;\n ctx.beginPath();\n const colCenterX = sunX;\n for (let i=0;i<=20;i++) {\n const fy = seaTop + (i\/20)*(seaBot-seaTop);\n const wob = Math.sin(fy*0.08+time*1.8)*7;\n const hw = refW\/2 + (i\/20)*refW*0.7;\n if(i===0) ctx.moveTo(colCenterX+wob-hw, fy);\n else ctx.lineTo(colCenterX+wob-hw, fy);\n }\n for (let i=20;i>=0;i--) {\n const fy = seaTop + (i\/20)*(seaBot-seaTop);\n const wob = Math.sin(fy*0.08+time*1.8)*7;\n const hw = refW\/2 + (i\/20)*refW*0.7;\n ctx.lineTo(colCenterX+wob+hw, fy);\n }\n ctx.closePath(); ctx.fill(); ctx.restore();\n\n \/\/ Wave lines\n const waves = [\n {y:0.05, amp:4, freq:0.020, spd:0.9, alpha:0.7},\n {y:0.25, amp:3.5,freq:0.025, spd:1.2, alpha:0.6},\n {y:0.55, amp:2.5,freq:0.032, spd:1.6, alpha:0.5},\n {y:0.80, amp:1.8,freq:0.045, spd:2.0, alpha:0.4},\n ];\n waves.forEach(w => {\n const wy = seaTop + w.y*(seaBot-seaTop);\n ctx.beginPath();\n for (let px=0;px<=W;px+=3) {\n const y = wy + w.amp*Math.sin(px*w.freq + time*w.spd);\n px===0 ? ctx.moveTo(px,y) : ctx.lineTo(px,y);\n }\n ctx.strokeStyle = `rgba(180,230,255,${w.alpha})`;\n ctx.lineWidth = 1;\n ctx.stroke();\n });\n\n \/\/ Glints\n for (let i=0;i<12;i++) {\n const gx = ((i*137.5 + time*30) % W);\n const gy = seaTop + (i%4)\/4*(seaBot-seaTop)*0.6;\n const gb = Math.pow(Math.max(0,Math.sin(time*1.5+i*0.8)),3);\n if (gb>0.1) {\n ctx.save(); ctx.globalAlpha = gb*0.7;\n ctx.strokeStyle='#fff'; ctx.lineWidth=1;\n const arm=gb*6;\n ctx.beginPath();\n ctx.moveTo(gx-arm,gy); ctx.lineTo(gx+arm,gy);\n ctx.moveTo(gx,gy-arm); ctx.lineTo(gx,gy+arm);\n ctx.stroke(); ctx.restore();\n }\n }\n }\n\n function drawTerrace(warmth) {\n \/\/ Stone wall \/ terrace foreground\n const wallTop = H * 0.73;\n const wallBot = H;\n\n \/\/ Wall fill \u2014 warm Cornish granite\n const wg = ctx.createLinearGradient(0, wallTop, 0, wallBot);\n wg.addColorStop(0, `rgb(${lerp(80,100,warmth)},${lerp(72,85,warmth)},${lerp(65,72,warmth)})`);\n wg.addColorStop(0.3, `rgb(${lerp(60,80,warmth)},${lerp(55,68,warmth)},${lerp(48,56,warmth)})`);\n wg.addColorStop(1, `rgb(${lerp(35,50,warmth)},${lerp(30,42,warmth)},${lerp(25,32,warmth)})`);\n ctx.fillStyle = wg;\n ctx.fillRect(0, wallTop, W, wallBot-wallTop);\n\n \/\/ Stone texture \u2014 rows of blocks\n ctx.save();\n ctx.globalAlpha = 0.12;\n ctx.strokeStyle = '#000';\n ctx.lineWidth = 1;\n const blockH = 18;\n for (let row=0; row < 8; row++) {\n const ry = wallTop + row*blockH;\n ctx.beginPath(); ctx.moveTo(0,ry); ctx.lineTo(W,ry); ctx.stroke();\n const offset = (row%2===0) ? 0 : 40;\n for (let bx=offset; bx<W; bx+=80) {\n ctx.beginPath(); ctx.moveTo(bx,ry); ctx.lineTo(bx,ry+blockH); ctx.stroke();\n }\n }\n ctx.restore();\n\n \/\/ Wall top edge \u2014 lighter capstones\n ctx.fillStyle = `rgba(${lerp(110,140,warmth)},${lerp(100,120,warmth)},${lerp(88,100,warmth)},0.9)`;\n ctx.fillRect(0, wallTop, W, 5);\n\n \/\/ Ambient light on wall from cinema screen (left of cinema)\n const screenLightX = W * 0.32;\n const sl = ctx.createRadialGradient(screenLightX, wallTop, 0, screenLightX, wallTop, W*0.35);\n sl.addColorStop(0, 'rgba(200,220,255,0.12)');\n sl.addColorStop(1, 'rgba(200,220,255,0)');\n ctx.fillStyle = sl;\n ctx.fillRect(0, wallTop, W, wallBot-wallTop);\n }\n\n function drawCinema(time, ci, warmth, sunX, sunY) {\n \/\/ Cinema is placed center-left of terrace\n const cx = W * 0.28; \/\/ center x of cinema setup\n const baseY = H * 0.73; \/\/ top of wall\n\n ctx.save();\n \/\/ Scale in from bottom during intro\n const scaleY = ci;\n ctx.translate(cx, baseY);\n ctx.scale(1, scaleY);\n ctx.translate(-cx, -baseY);\n\n \/\/ \u2500\u2500 SCREEN FRAME \/ STAND \u2500\u2500\n const screenW = Math.min(W * 0.22, 200);\n const screenH = screenW * 0.58;\n const screenX = cx - screenW\/2;\n const screenY = baseY - screenH - 60;\n\n \/\/ Screen pole \/ stand\n const poleX = cx;\n ctx.fillStyle = `rgba(${lerp(60,80,warmth)},${lerp(55,70,warmth)},${lerp(50,60,warmth)},0.95)`;\n ctx.fillRect(poleX-4, screenY+screenH, 8, 60);\n \/\/ Feet\n ctx.fillRect(poleX-28, baseY-8, 56, 8);\n\n \/\/ Screen glow behind screen\n const sg = ctx.createRadialGradient(cx, screenY+screenH\/2, 0, cx, screenY+screenH\/2, screenW*0.9);\n const flickerA = 0.18 + 0.04*Math.sin(time*7.3) + 0.02*Math.sin(time*13.1);\n sg.addColorStop(0, `rgba(180,200,255,${flickerA})`);\n sg.addColorStop(0.5, `rgba(140,170,255,${flickerA*0.4})`);\n sg.addColorStop(1, 'rgba(100,140,255,0)');\n ctx.fillStyle = sg;\n ctx.beginPath();\n ctx.ellipse(cx, screenY+screenH\/2, screenW*0.85, screenH*0.85, 0, 0, Math.PI*2);\n ctx.fill();\n\n \/\/ Screen border frame (white border)\n ctx.fillStyle = `rgba(220,220,220,0.95)`;\n ctx.beginPath();\n ctx.roundRect(screenX-5, screenY-5, screenW+10, screenH+10, 4);\n ctx.fill();\n\n \/\/ Screen surface \u2014 animated \"film\" content\n drawFilmContent(ctx, screenX, screenY, screenW, screenH, time);\n\n \/\/ Screen frame border\n ctx.strokeStyle = 'rgba(60,60,60,0.8)';\n ctx.lineWidth = 2;\n ctx.strokeRect(screenX-5, screenY-5, screenW+10, screenH+10);\n\n \/\/ \u2500\u2500 PROJECTOR BEAM \u2500\u2500\n \/\/ Beam from projector (right side) to screen\n const projX = cx + screenW * 1.1 + 30;\n const projY = baseY - 32;\n\n ctx.save();\n const beamFlicker = 0.12 + 0.04*Math.sin(time*9.1) + 0.02*Math.sin(time*17.3);\n const beamGrad = ctx.createLinearGradient(projX, projY, cx, screenY+screenH\/2);\n beamGrad.addColorStop(0, `rgba(255,255,220,${beamFlicker})`);\n beamGrad.addColorStop(0.5, `rgba(200,210,255,${beamFlicker*0.6})`);\n beamGrad.addColorStop(1, `rgba(180,200,255,${beamFlicker*0.2})`);\n\n ctx.fillStyle = beamGrad;\n ctx.beginPath();\n ctx.moveTo(projX-4, projY-2);\n ctx.lineTo(projX+4, projY+2);\n ctx.lineTo(screenX+screenW+5, screenY);\n ctx.lineTo(screenX+screenW+5, screenY+screenH);\n ctx.closePath();\n ctx.fill();\n ctx.restore();\n\n \/\/ \u2500\u2500 PROJECTOR BODY \u2500\u2500\n drawProjector(ctx, projX, projY, time, warmth);\n\n \/\/ \u2500\u2500 PROJECTOR STAND \/ TABLE \u2500\u2500\n ctx.fillStyle = `rgba(${lerp(55,75,warmth)},${lerp(50,65,warmth)},${lerp(44,55,warmth)},0.95)`;\n ctx.fillRect(projX-15, projY+14, 30, 28);\n ctx.fillRect(projX-22, baseY-8, 44, 8);\n\n \/\/ \u2500\u2500 FAIRY LIGHTS \u2500\u2500\n drawFairyLights(ctx, screenX-20, screenY-10, projX+30, projY-10, time);\n\n \/\/ \u2500\u2500 DECKCHAIRS \u2500\u2500\n drawDeckchairs(ctx, cx, baseY, screenW, time);\n\n ctx.restore(); \/\/ end of ci scale\n }\n\n function drawFilmContent(ctx, sx, sy, sw, sh, time) {\n ctx.save();\n ctx.beginPath();\n ctx.rect(sx, sy, sw, sh);\n ctx.clip();\n\n \/\/ Animated scene: ocean sunset on screen (meta!)\n const flick = 0.95 + 0.05*Math.sin(time*6.7);\n const skyG = ctx.createLinearGradient(sx, sy, sx, sy+sh*0.55);\n skyG.addColorStop(0, `rgba(${Math.round(200*flick)},120,60,1)`);\n skyG.addColorStop(1, `rgba(${Math.round(255*flick)},160,80,1)`);\n ctx.fillStyle = skyG;\n ctx.fillRect(sx, sy, sw, sh*0.55);\n\n \/\/ Sea on screen\n const seaG = ctx.createLinearGradient(sx, sy+sh*0.55, sx, sy+sh);\n seaG.addColorStop(0, `rgba(${Math.round(30*flick)},80,140,1)`);\n seaG.addColorStop(1, `rgba(${Math.round(15*flick)},50,100,1)`);\n ctx.fillStyle = seaG;\n ctx.fillRect(sx, sy+sh*0.55, sw, sh*0.45);\n\n \/\/ Screen waves\n ctx.beginPath();\n for (let px=0;px<=sw;px+=2) {\n const wy = sy+sh*0.57 + 3*Math.sin(px*0.12+time*2.5);\n px===0?ctx.moveTo(sx+px,wy):ctx.lineTo(sx+px,wy);\n }\n ctx.strokeStyle=`rgba(180,220,255,0.7)`;\n ctx.lineWidth=1;\n ctx.stroke();\n\n \/\/ Screen sun\n const scSunX = sx+sw*0.7, scSunY = sy+sh*0.25;\n const scSunG = ctx.createRadialGradient(scSunX,scSunY,0,scSunX,scSunY,sw*0.12);\n scSunG.addColorStop(0,'rgba(255,255,200,1)');\n scSunG.addColorStop(1,'rgba(255,160,40,0)');\n ctx.fillStyle=scSunG;\n ctx.beginPath(); ctx.arc(scSunX,scSunY,sw*0.12,0,Math.PI*2); ctx.fill();\n\n \/\/ Film grain effect\n ctx.globalAlpha = 0.03 + 0.02*Math.sin(time*40);\n for (let i=0;i<200;i++) {\n ctx.fillStyle = Math.random()>0.5?'#fff':'#000';\n ctx.fillRect(sx+Math.random()*sw, sy+Math.random()*sh, 1, 1);\n }\n ctx.globalAlpha = 1;\n ctx.restore();\n\n \/\/ Scanline overlay\n ctx.save();\n ctx.globalAlpha = 0.06;\n for (let ly=sy;ly<sy+sh;ly+=3) {\n ctx.fillStyle='#000';\n ctx.fillRect(sx, ly, sw, 1);\n }\n ctx.restore();\n }\n\n function drawProjector(ctx, px, py, time, warmth) {\n \/\/ Lens glow\n const lg = ctx.createRadialGradient(px-18, py, 0, px-18, py, 14);\n lg.addColorStop(0, `rgba(255,255,200,${0.8+0.15*Math.sin(time*8.1)})`);\n lg.addColorStop(0.4,'rgba(255,230,100,0.4)');\n lg.addColorStop(1, 'rgba(255,200,50,0)');\n ctx.fillStyle = lg;\n ctx.beginPath(); ctx.arc(px-18, py, 14, 0, Math.PI*2); ctx.fill();\n\n \/\/ Body\n const bodyCol = `rgb(${lerp(50,70,warmth)},${lerp(48,65,warmth)},${lerp(44,58,warmth)})`;\n ctx.fillStyle = bodyCol;\n ctx.beginPath();\n ctx.roundRect(px-42, py-12, 52, 24, 4);\n ctx.fill();\n\n \/\/ Lens barrel\n ctx.fillStyle = `rgb(${lerp(35,50,warmth)},${lerp(32,46,warmth)},${lerp(28,40,warmth)})`;\n ctx.beginPath();\n ctx.roundRect(px-22, py-9, 22, 18, 8);\n ctx.fill();\n\n \/\/ Lens face\n const lensFlare = 0.6 + 0.3*Math.sin(time*7.3);\n ctx.fillStyle = `rgba(180,200,255,${lensFlare})`;\n ctx.beginPath(); ctx.arc(px-14, py, 7, 0, Math.PI*2); ctx.fill();\n ctx.fillStyle='rgba(255,255,255,0.8)';\n ctx.beginPath(); ctx.arc(px-16, py-2, 2.5, 0, Math.PI*2); ctx.fill();\n\n \/\/ Reel on top\n ctx.fillStyle = `rgb(${lerp(42,58,warmth)},${lerp(40,54,warmth)},${lerp(36,48,warmth)})`;\n ctx.beginPath(); ctx.arc(px-25, py-20, 10, 0, Math.PI*2); ctx.fill();\n \/\/ Reel spokes\n ctx.save(); ctx.translate(px-25, py-20); ctx.rotate(time*1.5);\n ctx.strokeStyle=`rgba(${lerp(60,80,warmth)},${lerp(58,76,warmth)},${lerp(52,68,warmth)},0.8)`;\n ctx.lineWidth=1.5;\n for(let i=0;i<6;i++) {\n const a=(i\/6)*Math.PI*2;\n ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(Math.cos(a)*9,Math.sin(a)*9); ctx.stroke();\n }\n ctx.restore();\n ctx.fillStyle='rgba(80,80,80,0.9)';\n ctx.beginPath(); ctx.arc(px-25,py-20,3,0,Math.PI*2); ctx.fill();\n }\n\n function drawFairyLights(ctx, x1, y1, x2, y2, time) {\n const segs = 18;\n const sagAmount = 22;\n\n \/\/ Wire\n ctx.beginPath();\n ctx.strokeStyle = 'rgba(60,55,50,0.7)';\n ctx.lineWidth = 1;\n for (let i=0;i<=segs;i++) {\n const ft = i\/segs;\n const x = lerp(x1,x2,ft);\n const sag = Math.sin(ft*Math.PI)*sagAmount;\n const y = lerp(y1,y2,ft) + sag;\n i===0 ? ctx.moveTo(x,y) : ctx.lineTo(x,y);\n }\n ctx.stroke();\n\n \/\/ Bulbs\n const colours = ['#FF6B35','#F7C948','#4ECDC4','#FF8FAB','#A8EDEA','#FFF176'];\n for (let i=0;i<=segs;i++) {\n const ft = i\/segs;\n const x = lerp(x1,x2,ft);\n const sag = Math.sin(ft*Math.PI)*sagAmount;\n const y = lerp(y1,y2,ft) + sag;\n const col = colours[i%colours.length];\n const flicker = 0.7 + 0.3*Math.sin(time*4+i*1.7);\n\n \/\/ Glow\n ctx.save();\n ctx.globalAlpha = flicker*0.5;\n const bg = ctx.createRadialGradient(x,y,0,x,y,10);\n bg.addColorStop(0, col); bg.addColorStop(1,'rgba(0,0,0,0)');\n ctx.fillStyle = bg;\n ctx.beginPath(); ctx.arc(x,y,10,0,Math.PI*2); ctx.fill();\n ctx.restore();\n\n \/\/ Bulb\n ctx.save();\n ctx.globalAlpha = flicker;\n ctx.fillStyle = col;\n ctx.beginPath(); ctx.arc(x, y+4, 3.5, 0, Math.PI*2); ctx.fill();\n ctx.fillStyle = 'rgba(0,0,0,0.6)';\n ctx.fillRect(x-1.5, y, 3, 4);\n ctx.restore();\n }\n }\n\n function drawDeckchairs(ctx, cx, baseY, screenW, time) {\n \/\/ 3 deck chairs in front of screen, slightly left-centre\n const chairs = [\n { x: cx - screenW*0.55, tilt: -0.15, col: '#E84855', stripeCol: '#fff' },\n { x: cx - screenW*0.15, tilt: -0.1, col: '#3A86FF', stripeCol: '#fff' },\n { x: cx + screenW*0.25, tilt: -0.08, col: '#F7C948', stripeCol: '#333' },\n ];\n chairs.forEach((ch, i) => {\n const bob = Math.sin(time*0.5 + i*1.2) * 1.5;\n drawDeckchair(ctx, ch.x, baseY - 8 + bob, ch.tilt, ch.col, ch.stripeCol);\n });\n }\n\n function drawDeckchair(ctx, x, y, tilt, col, stripe) {\n ctx.save();\n ctx.translate(x, y);\n ctx.rotate(tilt);\n\n const cw = 26, ch = 16;\n\n \/\/ Seat fabric\n ctx.fillStyle = col;\n ctx.beginPath(); ctx.roundRect(-cw\/2, -ch, cw, ch, 2); ctx.fill();\n\n \/\/ Stripes\n ctx.save();\n ctx.beginPath(); ctx.roundRect(-cw\/2, -ch, cw, ch, 2); ctx.clip();\n ctx.fillStyle = stripe;\n ctx.globalAlpha = 0.25;\n for (let sx=-cw\/2; sx<cw\/2; sx+=5) {\n ctx.fillRect(sx, -ch, 2.5, ch);\n }\n ctx.restore();\n\n \/\/ Back rest\n ctx.fillStyle = col;\n ctx.save();\n ctx.rotate(-0.55);\n ctx.beginPath(); ctx.roundRect(-cw\/2, -ch*1.2, cw, ch*0.95, 2); ctx.fill();\n \/\/ Back stripes\n ctx.save();\n ctx.beginPath(); ctx.roundRect(-cw\/2, -ch*1.2, cw, ch*0.95, 2); ctx.clip();\n ctx.fillStyle = stripe;\n ctx.globalAlpha = 0.25;\n for (let sx=-cw\/2; sx<cw\/2; sx+=5) {\n ctx.fillRect(sx, -ch*1.2, 2.5, ch*0.95);\n }\n ctx.restore(); ctx.restore();\n\n \/\/ Legs\n ctx.strokeStyle = `rgba(60,50,40,0.85)`;\n ctx.lineWidth = 2;\n \/\/ Front legs\n ctx.beginPath(); ctx.moveTo(-cw\/2+4, 0); ctx.lineTo(-cw\/2-2, 12); ctx.stroke();\n ctx.beginPath(); ctx.moveTo(cw\/2-4, 0); ctx.lineTo(cw\/2+2, 12); ctx.stroke();\n \/\/ Crossbar\n ctx.beginPath(); ctx.moveTo(-cw\/2, 6); ctx.lineTo(cw\/2, 6); ctx.stroke();\n\n ctx.restore();\n }\n\n \/* \u2500\u2500\u2500 SPARKLES ON CLICK \u2500\u2500\u2500 *\/\n function burst(ex, ey) {\n const rect = hero.getBoundingClientRect();\n const bx = ex - rect.left;\n const by = ey - rect.top;\n\n const colours = ['#F7C948','#FF6B35','#4ECDC4','#FF8FAB','#FFF176','#A8EDEA','#fff','#FF4D2E'];\n const count = 32;\n\n for (let i=0; i<count; i++) {\n const angle = (i\/count)*Math.PI*2 + Math.random()*0.3;\n const speed = 60 + Math.random()*180;\n const size = 4 + Math.random()*10;\n const col = colours[Math.floor(Math.random()*colours.length)];\n const dur = 0.5 + Math.random()*0.7;\n const gravity= speed * 0.8;\n\n const el = document.createElement('div');\n el.className = 'spark';\n el.style.cssText = `\n left:${bx}px; top:${by}px;\n width:${size}px; height:${size}px;\n background:${col};\n box-shadow: 0 0 ${size*2}px ${col};\n --tx:${Math.cos(angle)*speed}px;\n --ty:${Math.sin(angle)*speed + gravity}px;\n --dur:${dur}s;\n border-radius:${Math.random()>0.4?'50%':'3px'};\n transform-origin:center;\n `;\n sparks.appendChild(el);\n el.addEventListener('animationend',()=>el.remove());\n }\n\n \/\/ Big star bursts\n const stars = ['\u2605','\u2726','\u2727','\u2728','\u25c6'];\n for (let i=0;i<8;i++) {\n const angle = Math.random()*Math.PI*2;\n const speed = 40+Math.random()*100;\n const el = document.createElement('div');\n el.className='spark-star';\n el.textContent = stars[Math.floor(Math.random()*stars.length)];\n const col = colours[Math.floor(Math.random()*colours.length)];\n el.style.cssText = `\n left:${bx}px; top:${by}px;\n color:${col};\n text-shadow:0 0 8px ${col};\n --tx:${Math.cos(angle)*speed}px;\n --ty:${Math.sin(angle)*speed + speed*0.5}px;\n --dur:${0.6+Math.random()*0.5}s;\n --sz:${12+Math.random()*14}px;\n `;\n sparks.appendChild(el);\n el.addEventListener('animationend',()=>el.remove());\n }\n\n \/\/ Central flash\n const flash = document.createElement('div');\n flash.style.cssText = `\n position:absolute;\n left:${bx-30}px; top:${by-30}px;\n width:60px; height:60px;\n border-radius:50%;\n background:radial-gradient(circle, rgba(255,255,200,0.9) 0%, rgba(255,200,50,0.4) 40%, transparent 70%);\n pointer-events:none;\n animation:sparkFly 0.35s ease-out forwards;\n --tx:0px; --ty:0px;\n `;\n sparks.appendChild(flash);\n flash.addEventListener('animationend',()=>flash.remove());\n }\n\n \/* \u2500\u2500\u2500 MOUSE \/ TOUCH \u2500\u2500\u2500 *\/\n hero.addEventListener('mousemove', e => {\n const r = hero.getBoundingClientRect();\n mouseX = clamp((e.clientX - r.left)\/W, 0, 1);\n mouseY = clamp((e.clientY - r.top)\/H, 0, 1);\n cursor.style.left = e.clientX+'px';\n cursor.style.top = e.clientY+'px';\n });\n\n hero.addEventListener('click', e => burst(e.clientX, e.clientY));\n\n hero.addEventListener('touchstart', e => {\n const touch = e.touches[0];\n burst(touch.clientX, touch.clientY);\n }, {passive:true});\n\n hero.addEventListener('touchmove', e => {\n const r = hero.getBoundingClientRect();\n const touch = e.touches[0];\n mouseX = clamp((touch.clientX - r.left)\/W, 0, 1);\n mouseY = clamp((touch.clientY - r.top)\/H, 0, 1);\n }, {passive:true});\n\n cta.addEventListener('mouseenter', () => cursor.classList.add('big'));\n cta.addEventListener('mouseleave', () => cursor.classList.remove('big'));\n\n \/* \u2500\u2500\u2500 EASING \u2500\u2500\u2500 *\/\n function easeOutBack(t) {\n const c1=1.70158, c3=c1+1;\n return 1+c3*Math.pow(t-1,3)+c1*Math.pow(t-1,2);\n }\n\n \/* \u2500\u2500\u2500 RENDER LOOP \u2500\u2500\u2500 *\/\n let lastTs = 0;\n function frame(ts) {\n const dt = Math.min((ts - lastTs)\/1000, 0.05);\n lastTs = ts;\n t += dt;\n\n if (isTouch) {\n autoT += dt;\n mouseX = 0.4 + Math.sin(autoT*0.4)*0.2;\n mouseY = 0.35 + Math.sin(autoT*0.25)*0.08;\n }\n\n smX += (mouseX - smX) * 0.04;\n smY += (mouseY - smY) * 0.04;\n\n ctx.clearRect(0,0,W,H);\n drawScene(t);\n requestAnimationFrame(frame);\n }\n\n requestAnimationFrame(ts => { lastTs=ts; requestAnimationFrame(frame); });\n})();\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Cine Del Mar \ud83c\udf0a Outdoor Cinema \u00b7 Cornwall CineDel Mar Immersive open-air cinema across Cornwall’s most spectacular coastal venues. Great […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/frosty-brahmagupta.77-68-90-22.plesk.page\/index.php?rest_route=\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frosty-brahmagupta.77-68-90-22.plesk.page\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/frosty-brahmagupta.77-68-90-22.plesk.page\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/frosty-brahmagupta.77-68-90-22.plesk.page\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frosty-brahmagupta.77-68-90-22.plesk.page\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9"}],"version-history":[{"count":10,"href":"https:\/\/frosty-brahmagupta.77-68-90-22.plesk.page\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":19,"href":"https:\/\/frosty-brahmagupta.77-68-90-22.plesk.page\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions\/19"}],"wp:attachment":[{"href":"https:\/\/frosty-brahmagupta.77-68-90-22.plesk.page\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}